DatePicker

DatePicker is a component used for users to select a date.

Theming

The DatePicker is a multi part component.

DatePicker inherits the style from Input and MultiSelect.

If you want to change the style of the component, please check here.

export const DatePicker: ComponentMultiStyle<"DatePicker"> = mergeMultiStyle(
  Input,
  MultiSelect,
  {
    baseStyle: {
      container: {},
      content: {
        minW: "auto",
        p: "2",
        w: "auto",
      },
      field: {
        cursor: "text",
        pb: "px",
        _focus: {
          zIndex: "unset",
        },
        _notAllowed: {
          cursor: "pointer",
        },
        _readOnly: {
          pointerEvents: "none",
        },
      },
    },

    sizes: {
      xs: {
        icon: {
          fontSize: "sm",
          pt: "2",
        },
      },
      sm: {
        icon: {
          fontSize: "lg",
        },
      },
    },
  },
)({
  omit: [
    "addon",
    "element",
    "group",
    "groupLabel",
    "header",
    "footer",
    "list",
    "item",
    "itemIcon",
  ],
})

Copied!

Edit this page on GitHub

PreviousMultiAutocomplete NextMultiDatePicker