◇

DatePicker

9 parts

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  DatePickerRoot,
  DatePickerTrigger,
  DatePickerAnchor,
  DatePickerPortal,
  DatePickerContent,
  DatePickerArrow,
  DatePickerClose,
  DatePickerCalendar,
  DatePickerField,
} from '@robonen/primitives/date-picker';

<DatePickerRoot>
  <DatePickerTrigger />
  <DatePickerAnchor />
  <DatePickerPortal />
  <DatePickerContent />
  <DatePickerArrow />
  <DatePickerClose />
  <DatePickerCalendar />
  <DatePickerField />
</DatePickerRoot>

API Reference

DatePickerRoot

Root

Prop	Type	Default	Description
`defaultOpen`?	`boolean`	—	Uncontrolled initial open state.
`modal`?	`boolean`	`false`	Modal popover (traps focus + blocks outside pointer).
`name`?	`string`	—	Hidden form input name for submission.
`valueFormat`?	`'iso' \| ((d: Date) => string)`	`'iso'`	Format used to serialize the hidden input value.
`closeOnSelect`?	`boolean`	`true`	Close popover on selection.