date-field

Accessible, internationalised segmented date & time input.

A segmented date field — each part (month, day, year, and optionally hour, minute, second, AM/PM) is an individually focusable spinbutton, not a masked string. The segment order, separators, calendar system and hour cycle all follow the locale. Each segment steps with the arrow keys, accepts typed digits, and clears with Backspace. Powered by @fluixi/date-core.

Installation

pnpm add @fluixi/date-field

Usage

import { DateField, DateFieldLabel, DateInput } from '@fluixi/date-field';
import { today, getLocalTimeZone } from '@fluixi/date-core';

<DateField locale="en-US" defaultValue={today(getLocalTimeZone())} onChange={console.log}>
  <DateFieldLabel>Due date</DateFieldLabel>
  <DateInput />
</DateField>

Date & time

Add time segments with granularity; force a 12- or 24-hour clock with hourCycle (defaults to the locale's convention).

<DateField locale="en-US" granularity="minute" hourCycle={12}>
  <DateInput />
</DateField>

Time field

TimeField is the same segmented input over a bare Time value (hour / minute, optionally second, plus AM/PM on a 12-hour clock). It reuses the same segment parts via TimeInput / TimeFieldLabel.

import { TimeField, TimeFieldLabel, TimeInput } from '@fluixi/date-field';
import { Time } from '@fluixi/date-core';

<TimeField locale="en-US" hourCycle={12} defaultValue={new Time(9, 30)} onChange={console.log}>
  <TimeFieldLabel>Start time</TimeFieldLabel>
  <TimeInput />
</TimeField>

Props: locale, value / defaultValue / onChange (a Time), granularity ('hour' | 'minute' | 'second', default 'minute'), hourCycle, placeholderValue, isDisabled, isReadOnly, isRequired, name.

Forms

Pass name to emit a hidden input carrying the ISO value for native submission (YYYY-MM-DD for a date field, HH:MM:SS for a time field).

Props (DateField)

Parts

Segments render as div[role=spinbutton] with data-date-field-segment="<type>" and data-placeholder while empty.

Keyboard