Date Field

Accessible, unstyled segmented date input whose segment order follows the locale.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { DateField } from "@vizejs/ui/date-field";

Or copy the source into your project with vize lib pull date-field (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Segmented birthday input whose day, month, and year order follows the locale. -->
<script setup lang="ts">
import { ref, useId } from "vue";

import { DateField, type PlainDate } from "@vizejs/ui/date-field";

const birthday = ref<PlainDate | null>({ year: 1990, month: 4, day: 12 });
const labelId = useId();
const max: PlainDate = { year: 2026, month: 1, day: 1 };

function formatDate(date: PlainDate): string {
  return `${date.year}-${String(date.month).padStart(2, "0")}-${String(date.day).padStart(2, "0")}`;
}
</script>

<template>
  <div>
    <span :id="labelId">Date of birth</span>
    <DateField v-model="birthday" name="birthday" locale="en-GB" :max :aria-labelledby="labelId" />
    <output>{{ birthday ? formatDate(birthday) : "No date entered" }}</output>
  </div>
</template>

API

DateField

Source: src/families/date-time/date-field/date-field.vue

Props

Events

Slots

Behavior

Normative state x input -> outcome table for date-field.vue (@vizejs/ui/date-field), a segmented spinbutton date input. The segment engine (field-segments.ts, field-segment-runtime.ts) is shared with TimeField. Every row is proven by the named test.

Extension hooks