Date and time picker
DateTimePickeris similar to
DatePicker, but extends the popover to include a section for setting the time. Users can also edit the date by typing in the input field.
tsxCopied1<DateTimePicker label="Choose a date and time" placeholder="Choose a date and time" />
Whether to automatically focus on the picker input.
Allow the date value to be cleared.
The picker's disabled state on initial render.
The picker value on initial render.
Description displayed below the picker.
Disables the picker. Prefer to use defaultDisabled and component state.
Error text displayed below the picker.
Callback function to determine if day should be disabled.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
The ID referenced by the global component state.
Whether the calendar dropdown should be open initially.
Label displayed above the picker.
Called when the date changes. Prefer to use component state to get the value.
Callback function that is called when the picker dropdown closes.
Hint text displayed when the picker is empty.
Input border radius.
Adds red asterisk on the right side of label and sets required on input element
A single function or an array of functions that validate the input value.
Selected date if using this component as a controlled component. Prefer to use the component state to get the value.
Whether the picker is disabled
Sets the disabled value of the picker. If the
disabled value is not provided, the picker will be disabled
Sets the value of the picker
The selected Date