Date And TimePicker
The DateAndTimePicker component is a versatile, responsive UI element designed for effortless date and time selection. It provides an intuitive calendar interface with support for:
- Date Range Control: Limit user selection via
minDateandmaxDate. - Localization: Format dates to various locales using the
localeprop. - Custom Navigation: Easily customize navigation controls using
forwardIconandbackwardIcon. - Time Integration: Optionally incorporate time selection through the
timeModule.
Built with accessibility in mind, and leveraging DasiyUI and Tailwind CSS, this component ensures a modern, mobile-first experience across all devices.
Light (default)
Date and Time
12:00
Combined
Multiple Date and Time Pickers
DateAndTimePicker is primarly used for start and end date pickers.
Key features are
- makes the min date
Date and Time
12:00
Date and Time
12:00
Props
| Prop | Type | Description |
|---|---|---|
value | `string | null |
locale | string | Specifies the locale for date formatting and calendar display (e.g., "en-US"). |
minDate | `string | Date` (optional) |
maxDate | `string | Date` (optional) |
onChange | (date: string) => void | Callback invoked when the date/time value changes, passing the updated value as a string. |
placeholder | string (optional) | Placeholder text in the input field when no date is selected. |
className | string (optional) | Additional CSS classes for the outer container of the DatePicker. |
combined | boolean (optional) | Determines if the date and time pickers are combined. |
AMPM | boolean (optional) | Determines if the time picker should use AM/PM format. |
dateProps | DatePickerProps (optional) | Additional props for the date picker component. See DatePickerProps |
timeProps | TimePickerProps (optional) | Additional props for the time picker component. See TimePickerProps |
A note on date and time props
The DateAndTimePicker component is a wrapper around the DatePicker and TimePicker components.
The dateProps and timeProps are used to pass additional props to the DatePicker and TimePicker components.
values, "onChange" | "locale" | "disabled" | "placeholder" | "value | "AMPM" are handled by the wrapper and not accessible