DatePicker

A date field with a calendar popover for visual date selection. Combines segmented input with a dropdown calendar.

Example

Pick a date

04032026

Selected: 2026-04-03

Root Props

Prop	Type	Default	Description
`value`	`DateValue`	—	Selected date, bindable
`onValueChange`	`(value) => void`	—	Called when date changes
`placeholder`	`DateValue`	—	Placeholder date, bindable
`open`	`boolean`	`false`	Controls popover open state, bindable
`onOpenChange`	`(open: boolean) => void`	—	Called when popover toggles
`minValue`	`DateValue`	—	Minimum selectable date
`maxValue`	`DateValue`	—	Maximum selectable date
`disabled`	`boolean`	`false`	Disable the picker
`readonly`	`boolean`	`false`	Make the field read-only
`isDateDisabled`	`DateMatcher`	—	Function to disable specific dates
`isDateUnavailable`	`DateMatcher`	—	Function to mark dates unavailable
`locale`	`string`	`'en'`	Locale for formatting
`granularity`	`'day' \| 'month' \| 'year' \| 'hour' \| 'minute' \| 'second'`	—	Finest unit to display
`hourCycle`	`12 \| 24`	—	12 or 24-hour time format
`closeOnDateSelect`	`boolean`	`true`	Close popover after selecting
`numberOfMonths`	`number`	`1`	Months shown in calendar
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6`	`0`	First day of week
`fixedWeeks`	`boolean`	`false`	Always show 6 weeks
`required`	`boolean`	`false`	Mark as required

Sub-components

Component	Key Props	Description
`DatePicker.Label`	`class`	Label for the picker
`DatePicker.Input`	`name`, `class`	Segmented date input
`DatePicker.Segment`	`part`, `class`	Individual date segment
`DatePicker.Trigger`	`class`	Button to open the calendar popover
`DatePicker.Content`	`side`, `sideOffset`, `class`	Popover container for the calendar
`DatePicker.Calendar`	`class`	Pre-built calendar with header and grid

Usage

<script>
  import { DatePicker } from '@chrissnell/chonky-ui';
  import { CalendarDate } from '@internationalized/date';

  let value = $state(new CalendarDate(2026, 4, 3));
</script>

<DatePicker.Root bind:value>
  <DatePicker.Label>Pick a date</DatePicker.Label>
  <div style="display: flex; align-items: center; gap: 0.25rem;">
    <DatePicker.Input />
    <DatePicker.Trigger />
  </div>
  <DatePicker.Content>
    <DatePicker.Calendar />
  </DatePicker.Content>
</DatePicker.Root>