Date and time picker
DateTimePicker is similar toDatePicker, but extends the popover to include
a section for setting the time. Users can also edit the date by typing in the input field.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 | SizingToken | "{number}px" Defines the width of the component. | auto |
| height | SizingToken | "{number}px" Defines the height of the component. | auto |
| grow | boolean If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack. | |
| 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 | React.ReactNode Error text displayed below the picker. | |
| label | React.ReactNode Label displayed above the picker. | |
| description | React.ReactNode 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. |
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 |