date-picker

Date Picker

A date typed segment by segment or picked from a calendar the button beside it opens; joins a Field around it.

States: Default, Hover, Focus, Disabled, Invalid

Parts

PartFileDoes
DatePickerDatePicker.vueLets the user type a date, or pick it from a calendar the button beside it opens.
DatePickerContentDatePickerContent.vueThe popover a DatePicker's or DateRangePicker's calendar opens in, lined up with the field.
DatePickerTriggerDatePickerTrigger.vueThe calendar button at the end of a DatePicker's or DateRangePicker's field.

Anatomy

<DatePicker>
  <DatePickerTrigger />
  <DatePickerContent />
</DatePicker>

Styling

PartRecipe
DatePickerContentdate-picker-content
DatePickerTriggerdate-picker-trigger

Install

Writes 5 files into components/ui/date-picker/. For agents, npx @frontic/ui docs date-picker prints this reference as markdown; the MCP server serves the same.

npm packages
@internationalized/date
@lucide/vue
@vueuse/core
reka-ui

Built from

API reference

DatePicker DatePicker.vue

Lets the user type a date, or pick it from a calendar the button beside it opens.

PropTypeDefault
disabledbooleanfalse
dirDirection—
modelValueDateValue | null—
defaultValueDateValue—
namestring—
requiredbooleanfalse
defaultPlaceholderDateValue—
placeholderDateValue—
maxValueDateValue—
minValueDateValue—
localestring—
readonlybooleanfalse
isDateUnavailableMatcher—
idstring—
hourCycleHourCycle—
stepDateStep—
stepSnappingbooleanfalse
granularityGranularity—
hideTimeZonebooleanfalse
defaultOpenbooleanfalse
openbooleanfalse
modalbooleanfalse
pagedNavigationbooleanfalse
preventDeselectbooleanfalse
weekStartsOnWeekStartsOn—
weekdayFormatWeekDayFormat—
fixedWeeksbooleanfalse
numberOfMonthsnumber—
isDateDisabledMatcher—
closeOnSelectbooleantrue
classClassValue—
layoutLayoutTypes—
triggerLabelstring'Open calendar'
EventPayload
update:modelValuedate: DateValue | undefined
update:openvalue: boolean
update:placeholderdate: DateValue
SlotSlot props
default{ segments: Segment[]; modelValue: DateValue | undefined; }

DatePickerContent DatePickerContent.vue

DatePickerTrigger DatePickerTrigger.vue

Example
State