date-field

Date Field

A date typed one segment at a time, in the order and format of the user's locale; joins a Field around it.

States: Default, Focus, Disabled, Invalid

Parts

PartFileDoes
DateFieldDateField.vueLets the user type a date one segment at a time, in the order and format of their locale.
DateFieldInputDateFieldInput.vueOne segment of the date, such as the day or the month, or a separator between two.

Anatomy

<DateField>
  <DateFieldInput />
</DateField>

Styling

PartRecipe
DateFielddate-field
DateFieldInputdate-field-segment
DateFieldInputdate-field-literal

Install

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

npm packages
@vueuse/core
reka-ui

API reference

DateField DateField.vue

Lets the user type a date one segment at a time, in the order and format of their locale. Inside a DatePicker or DateRangePicker it takes the picker's dates and settings.

PropTypeDefault
defaultValueDateValue—
defaultPlaceholderDateValue—
placeholderDateValue—
modelValueDateValue | null—
hourCycleHourCycle—
stepDateStep—
stepSnappingbooleanfalse
granularityGranularity—
hideTimeZonebooleanfalse
maxValueDateValue—
minValueDateValue—
localestring—
disabledbooleanfalse
readonlybooleanfalse
isDateUnavailableMatcher—
idstring—
dirDirection—
asChildbooleanfalse
asAsTag | Component—
namestring—
requiredbooleanfalse
classClassValue—
EventPayload
update:modelValuedate: DateValue | undefined
update:placeholderdate: DateValue
SlotSlot props
default{ segments: Segment[] | { start: Segment[]; end: Segment[]; }; modelValue: DateValue | DateRange | null | undefined; isInvalid?: boolean | undefined; }
end—
Recipe date-fieldSets
base: date-field 15 properties · 9 inherited
disabledshared state 1 property

DateFieldInput DateFieldInput.vue

Example
State