Date Picker

Selects one date or a date range with direct month and year navigation.

@rivetui/date-picker

Preview

Explore each composition interactively, then open its code in the same context.

Select a single local date with direct month and year navigation.

Note

Omit value and defaultValue for an empty picker. disabled and aria-invalid follow the same form-state conventions as other Rivet controls.

Release date

Dates are submitted as local YYYY-MM-DD values.

Collect a start and end date in one coordinated calendar.

Pass calendar rules through calendarProps when only part of the calendar is selectable.

Registry

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/date-picker

Public interface

Component-specific props are listed here. Native element and Base UI props continue to pass through.

Prop	Type	Default
`value`	`Date`	`—`
`defaultValue`	`Date`	`—`
`onValueChange`	`(date: Date \| undefined) => void`	`—`
`placeholder`	`string`	`"Select date"`
`formatLocale`	`Intl.LocalesArgument`	`runtime locale`
`dateFormat`	`Intl.DateTimeFormatOptions`	`{ dateStyle: "medium" }`
`calendarProps`	`DayPickerProps`	`—`
`open`	`boolean`	`—`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean, details) => void`	`—`
`disabled`	`boolean`	`false`
`name`	`string`	`—`

Prop	Type	Default
`value`	`DateRange`	`—`
`defaultValue`	`DateRange`	`—`
`onValueChange`	`(range: DateRange \| undefined) => void`	`—`
`placeholder`	`string`	`"Select date range"`
`formatLocale`	`Intl.LocalesArgument`	`runtime locale`
`dateFormat`	`Intl.DateTimeFormatOptions`	`{ dateStyle: "medium" }`
`calendarProps`	`DayPickerProps`	`—`
`open`	`boolean`	`—`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`(open: boolean, details) => void`	`—`
`fromName`	`string`	`—`
`toName`	`string`	`—`
`disabled`	`boolean`	`false`