Date Picker

Calendar in a Popover with a trigger that reads like an Input. Every Calendar capability passes through — range, presets, times, multiple months — so there is one date implementation, not two.

src/components/ui/date-picker.tsx

About

From the component's own source, where it was written.

The same three treatments Input and Select offer.

Install

npx astralyx-ui add date-picker

Usage

import { DatePicker } from '@/components/ui/date-picker'

<DatePicker value={date} onValueChange={setDate} />

<DatePicker
  mode="range"
  presets={defaultPresets()}
  onValueChange={setRange}
/>

Composer

Change the props and the source below follows.

Props

mode

size

locale

showTimepresetserrordisabled

tsx

<DatePicker
  size="md"
  locale="en-GB"
  onValueChange={setValue}
/>

Examples

Single and range

tsx

<DatePicker />
<DatePicker mode="range" presets={defaultPresets()} />

With a time

tsx

<DatePicker showTime defaultValue={new Date()} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`DatePicker`

Extends Omit<ComponentProps<'button'>, 'value' | 'defaultValue' | 'onSelect' | 'mode'>.

Prop	Type	Default	Description
placeholder	string	—	—
locale	string	—	—
fromDate	Date	—	Bounds and an arbitrary per-day rule. Named disabledDate here so it does not collide with the trigger's own disabled.
toDate	Date	—	Bounds and an arbitrary per-day rule. Named disabledDate here so it does not collide with the trigger's own disabled.
disabled	boolean	—	—
disabledDate	(date: Date) => boolean	—	Bounds and an arbitrary per-day rule. Named disabledDate here so it does not collide with the trigger's own disabled.
size	keyof typeof fieldSize	'md'	Same steps as Input, so the two align in a form row.
variant	'default' \| 'secondary' \| 'ghost' \| 'default' \| 'secondary' \| 'ghost'	—	Matches Input and Select, so a form can be uniform.
error	boolean	—	—
numberOfMonths	number	—	Forwarded to the Calendar inside.
weekStartsOn	WeekStart	—	—
captionLayout	'label' \| 'dropdown' \| 'label' \| 'dropdown'	—	Forwarded to the Calendar inside.
showTime	boolean	—	Forwarded to the Calendar inside.
timeStep	number	—	—
footer	ReactNode	—	—
closeOnSelect	boolean	!showTime	A range waits for both ends. With showTime the popover stays open, since closing on the day would give no chance to set the hour.
className	string	—	—
mode	'single' \| 'range'	'single'	Range mode defaults to two months and formats the trigger as "from – to".
value	Date \| DateRange	—	Controlled and uncontrolled.
defaultValue	Date \| DateRange	—	Controlled and uncontrolled.
onValueChange	(date: Date) => void \| (range: DateRange) => void	—	Fires on every pick, including the first half of a range.
presets	CalendarPreset[]	—	Forwarded to the Calendar inside.