Datetime Picker
A comprehensive datetime picker component built on top of shadcn-ui with no additional libraries required. Features date and time selection, calendar interface, and smart datetime input for modern web applications.
Thanks to Yerfa
Smart DateTime Input Example
Installation
npx uilayouts@latest add dateTime-input
Example
Time Picker
Time Input Example
Date Picker
Date Input Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | undefined | The selected date value for the input. |
onValueChange | (date: Date) => void | - | Callback function triggered when the date value changes. |
showCalendar | boolean | true | Whether to display a calendar for date selection. |
showTimePicker | boolean | true | Whether to display a time picker for time selection. |
className | string | undefined | Additional CSS class names to style the input component. |
placeholder | string | undefined | Placeholder text displayed when no value is selected. |
disabled | boolean | undefined | Whether the input is disabled and not interactive. |