Datetime Picker

A date and time picker built on shadcn/ui with no extra dependencies.

@spectrumui/datetime-picker-demo

Installation

Usage

Hour cycle - 12H / 24H

@spectrumui/datetime-picker-hour-cycle

12 Hour

24 Hour

Date picker or Time picker

@spectrumui/datetime-picker-and-time-input

Date Picker

Time Input

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.

@spectrumui/datetime-picker-year-range

± 3 Years

± 10 Years

± 30 Years

Locale

Import locale from date-fns

@spectrumui/datetime-picker-locale

The following example is zhTW from date-fns.

Week start on Monday, Show week number, Disable outside days

@spectrumui/datetime-picker-calendar-settings

Week start on Monday

Show week number

Disable outside days

Display Format

Visit date-fns to customize the format.

@spectrumui/datetime-picker-display-format

Placeholder

@spectrumui/datetime-picker-placeholder

Granularity

@spectrumui/datetime-picker-granularity

Minute

Hour

Day

Disabled

@spectrumui/datetime-picker-disabled

Ref

@spectrumui/datetime-picker-ref

Form

@spectrumui/datetime-picker-form

Properties

Prop	Type	Default	Description
`value`	`Date \| undefined`	-	Date value.
`onChange`	`(Date) => void`	-	When you pick a date, the `onChange` will be called.
`hourCycle`	`12 \| 24`	`24`	Hour cycle that showing AM/PM or not.
`placeholder`	`string`	`Pick a date`	The datetime picker placeholder.
`disabled`	`boolean`	`false`	Disabled Datetime Picker.
`yearRange`	`number`	`50`	The year dropdown range according to this year. By default is 50, which means this year ± 50. For example: This year is 2026. the year dropdown range will be 1976 to 2076.
`displayFormat`	`{ hour24?: string, hour12?: string }`	`{ hour24: 'PPP HH:mm:ss', hour12: 'PP hh:mm:ss b' }`	Custom display format by `date-fns`.
`granularity`	`'day' \| 'hour' \| 'minute' \| 'second'`	`second`	The granularity prop allows you to control the smallest unit that is displayed by DatePicker. By default is `second` which shows all time inputs.