Capture datetime from the user
DateTimePicker supports most of the DatePicker props. Read through the DatePicker documentation to learn about all component features that are not listed on this page.
Set type="range" to allow selecting a date and time range. In range mode, two time inputs are rendered for start and end times, and a range summary is displayed below:
Use the presets prop to add custom date presets. Presets are displayed next to the calendar:
You can pass props down to the underlying TimePicker component with the timePickerProps prop. Example of enabling dropdown and setting 12h format for the time picker:
Use the valueFormat prop to change the dayjs format of the value label:
valueFormat also accepts a function that receives the value as a YYYY-MM-DD HH:mm:ss string and returns a custom formatted value. Use it when the formatting logic cannot be expressed with a dayjs format string:
DateTimePicker component supports Input and Input.Wrapper component features and all button element props. The DateTimePicker documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set the clearable prop to display a clear button in the right section. Note that if you set the rightSection prop, the clear button will not be displayed.
The clearSectionMode prop determines how the clear button and rightSection are rendered:
By default, the picker is rendered inside Popover . You can change that to Modal by setting dropdownType="modal" :
If DateTimePicker is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :
InlineDateTimePicker