Date picker
The
DatePicker component allows users to select a date. For selecting a date and time, use
DateTimePicker.Basic usage
Component API
| Name | Description | Default |
|---|---|---|
| id | string The ID referenced by the global component state. | |
| defaultValue | Date The picker value on initial render. | |
| defaultDisabled | boolean The picker's disabled state on initial render. | |
| validate | ((value: Date | null) => string | undefined) | Array<(value: Date | null) => string | undefined> A single function or an array of functions that validate the input value. | |
| required | boolean Adds red asterisk on the right side of label and sets required on input element | false |
| onChange | (value: Date | null) => void Called when the date changes. Prefer to use component state to get the value. | |
| variant | "unstyled" | "default" Picker appearance. | |
| size | "xs" | "sm" | "md" | "lg" | "xl" Picker size. | sm |
| disabled | boolean Disables the picker. Prefer to use defaultDisabled and component state. | |
| radius | "xs" | "sm" | "md" | "lg" | "xl" Input border radius. | |
| width | number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; } Width of the component. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up
the entire row, 6 is half, 1 is 1/12.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row.
content indicates that the component should take up as much space as its content.
auto indicates that the component should take any leftover space on the row.
To set width based on the screen size, use an object with a specific width for each breakpoint.
e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%. | content |
| offset | number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; } Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect.
If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row.
If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row.
If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row.
To set offset based on the screen size, use an object with a specific offset for each breakpoint.
e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%. | |
| placeholder | string Hint text displayed when the picker is empty. | |
| autoFocus | boolean Whether to automatically focus on the picker input. | |
| value | Date Selected date if using this component as a controlled component. Prefer to use the
component state to get the value. | |
| error | Component Error text displayed below the picker. | |
| label | Component Label displayed above the picker. | |
| description | Component Description displayed below the picker. | |
| clearable | boolean Allow the date value to be cleared. | false |
| initiallyOpened | boolean Whether the calendar dropdown should be open initially. | false |
| excludeDate | (date: Date) => boolean Callback function to determine if day should be disabled. | |
| onDropdownClose | () => void Callback function that is called when the picker dropdown closes. | |
| closeCalendarOnChange | boolean Whether to close the calendar when a date is selected. | true |
State API
| Name | Description |
|---|---|
| value | Date | null The selected Date |
| setValue | (value: Date | null) => void Sets the value of the picker |
| disabled | boolean Whether the picker is disabled |
| setDisabled | (disabled?: boolean) => void Sets the disabled value of the picker. If the `disabled` value is not provided, the picker will be disabled |