Datetime Picker
A datetime picker built on top of shadcn-ui and no additional library needed.
Installation
1
Install the package
2
Paste this code into your project
3
Update react-day-picker to ^9.*
4
Update import paths as needed
Usage
Hour cycle - 12H / 24H
Date picker or Time picker
Year Dropdown Range
The year range will be: this year + yearRange and this year - yearRange.
Default is 50.
For example: This year is 2026, The year dropdown will be 1976 to 2076 which is generated by 2026 - 50 = 1976 and 2026 + 50 = 2076.
Locale
Import locale from date-fns
Week start on Monday, Show week number, Disable outside days
Display Format
Visit date-fns to customize the format.
Placeholder
Granularity
Disabled
Ref
Form
Properties
| Property | Type | Default |
|---|---|---|
value | Date | undefined | |
onChange | (Date) => void | |
hourCycle | 12 | 24 | 24 |
placeholder | string | Pick a date |
disabled | boolean | false |
yearRange | number | 50 |
displayFormat | { hour24?: string, hour12?: string } | { hour24: 'PPP HH:mm:ss', hour12: 'PP hh:mm:ss b' } |
granularity | 'day' | 'hour' | 'minute' | 'second' | second |