DateField

A date field is the typing half of a DatePicker on its own. Reach for it where a calendar would be in the way — a date of birth is faster typed than paged back to, and nobody wants to walk a grid through forty years.

import { DateField, DateFieldGroup, DateFieldInput, DateFieldSegment, Label } from "ropav";

DateFieldInput renders one DateFieldSegment per part of the date, in the order the reader's locale writes them — so the same markup produces MM/DD/YYYY for one reader and DD.MM.YYYY for another, without the app choosing.

Date of birth

mm/dd/yyyy

date-field-basic.vue

<script setup lang="ts">
import { DateField, DateFieldGroup, DateFieldInput, DateFieldSegment, Label } from "ropav";
</script>

<template>
  <div class="field">
    <DateField name="date">
      <Label>Date of birth</Label>
      <DateFieldGroup>
        <DateFieldInput>
          <template #default="{ segment }">
            <DateFieldSegment :segment />
          </template>
        </DateFieldInput>
      </DateFieldGroup>
    </DateField>
  </div>
</template>

<style scoped>
/* The control renders two roots, so a scoped rule has nothing in it to attach to. The demo
   owns this box instead, and a column stretches the control across it. */
.field {
  display: flex;
  flex-direction: column;
  width: calc(var(--rp-spacing) * 64);
}
</style>

granularity decides how far down the segments go — day, hour, minute or second — and hide-time-zone drops the zone segment for a value that carries one.

The parts are shared with the DateRangePicker and the date picker: they are the same components re-exported under each field's own name, so what you learn about segments here holds in all three.

Accessibility

• Each segment is its own spin button. Arrow keys change the segment under the cursor, typing fills it and moves on, and Backspace clears it — so a date can be entered without ever touching a calendar.
• The field is announced as one thing with the segments inside it, not as three unrelated inputs. The Label names the whole field.
• An incomplete date is not reported as invalid while it is being typed. That matters here more than in a plain text field, because the segments are filled one at a time and there is always a moment where the value is half-written.
• Segments are read in locale order, so a reader hears the date in the shape their locale uses rather than the order the markup happens to be in.

API

Prop	Type	Default	Description
ariaDescribedby	string	—
ariaLabel	string	—
ariaLabelledby	string	—
autoComplete	string	—	What the browser may offer to autofill.
autoFocus	boolean	—	Whether the first segment takes focus as the field appears.
createCalendar	((identifier: CalendarIdentifier) => Calendar)	—	Builds the calendar system for an identifier. Injectable so a build can ship fewer of them.
defaultValue	DateValue | null	—	The date the field starts with while it owns its own value.
form	string	—	Id of the form the value belongs to, when it is not an ancestor.
fullWidth	boolean	—	Whether the field stretches to fill its container.
granularity	"day" | "hour" | "minute" | "second"	—	The smallest part of a date the field shows. Taken from the value when unset.
hideTimeZone	boolean	—	Whether the time zone abbreviation is hidden.
hourCycle	12 | 24	—	Whether to show a 12 or 24 hour clock. Taken from the locale when unset.
id	string	—	Id for the group around the segments, which is what a label points at.
isDateUnavailable	((date: DateValue) => boolean)	—	Rules a date out even though it is inside the range. A prop rather than an emit: the field calls it while validating, and an emit has no answer to give back.
isDisabled	boolean	—
isInvalid	boolean	—	Whether the field reads as invalid regardless of what it holds.
isReadOnly	boolean	—
isRequired	boolean	—
locale	string	—	Overrides the locale in force, for a field that must not follow its surroundings.
maxGranularity	"day" | "hour" | "minute" | "month" | "second" | "year"	"year"	The largest part of a date the field shows.
maxValue	DateValue | null	—
minValue	DateValue | null	—
name	string	—	Name the value is submitted under.
placeholderValue	DateValue | null	—	A date whose shape the placeholder follows, which is how a field can ask for a time before anything is typed. Defaults to today.
shouldForceLeadingZeros	boolean	—	Whether numbers are always padded to two digits. Taken from the locale when unset.
validate	((value: DateValue | null) => string | true | string[] | null | undefined)	—	Extra rule the value has to satisfy, beyond the range.
validationBehavior	"aria" | "native"	"native"	Whether errors go through the browser or through ARIA alone.
value	DateValue | null	—	The date the field shows. Set this and the caller owns the value.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isInvalid	boolean
isReadOnly	boolean
isRequired	boolean

Event	Payload
change	DateValue | null
focusChange	boolean
update:value	DateValue | null