IDateField ​

A date typed one segment at a time — day, month, year — each its own arrow-key control, ordered by the locale.

<script setup lang="ts">
const born = ref('1994-03-22')
</script>

<template>
  <IFormField label="Date of birth">
    <IDateField v-model="born" locale="en-GB" />
  </IFormField>
</template>

The model is an ISO YYYY-MM-DD string, the same as IDatePicker and ICalendar.

Typing or choosing ​

Reach for IDateField when the reader already knows the date: a birthday, an invoice date, a passport expiry. Hunting for 22 March 1994 in a month grid means paging back three hundred and eighty times.

Reach for IDatePicker when the date is being chosen rather than recalled — a delivery slot, a meeting — and especially when which day of the week it lands on matters.

They pair well: a field to type into, with a picker beside it for the times the reader wants to see the month.

<div class="flex items-center gap-2">
  <IDateField v-model="issued" locale="en-GB" />
  <IDatePicker v-model="issued" />
</div>

Both write the same ISO string, so pointing them at one model is all the wiring there is.

Locale ​

The locale decides both the order of the segments and the separator — there is no prop for either, because getting it wrong is how a form ends up asking a British reader for 08/15/2026.

<IDateField v-model="issued" locale="en-GB" /> <!-- 15/08/2026 -->
<IDateField v-model="issued" locale="en-US" /> <!-- 08/15/2026 -->
<IDateField v-model="issued" locale="de-DE" /> <!-- 15.08.2026 -->

Bounds and availability ​

minValue and maxValue fence the field, and isUnavailable refuses individual days — both in ISO strings, as everywhere else.

<IDateField
  v-model="bounded"
  min-value="2026-09-01"
  max-value="2026-10-31"
  :is-unavailable="date => [0, 6].includes(new Date(`${date}T00:00:00`).getDay())"
/>

An out-of-bounds value marks the field invalid rather than silently correcting itself — the reader typed something, and having it change under them is worse than being told.

Empty and invalid ​

With no model the segments show their placeholders and the field is empty, not zero. invalid styles it, and IFormField sets that for you from a form's validation.

<IFormField label="Due date" error="Enter a date">
  <IDateField v-model="due" />
</IFormField>

Why not <input type="date"> ​

The native control gives no say over the segment order, no way to mark individual days unavailable, and renders a different thing in every browser — including a picker button that cannot be styled or removed. This is three arrow-key spinbuttons with the field chrome the rest of the library uses, which is what makes it sit properly beside an IInput or an ITimeField.

Props ​