Date segments

The model of a segmented date input: day, month and year fields with their literals.

Reach for them to build a date field with separate parts. The helpers are pure: no DOM at import time or in the call path, so they run on the server and in tests. Each result below is computed when the page is built, by running the call shown.

Import

import {
	buildDateSegments,
	segmentsToDate,
	draftStatus,
	allSegmentsEmpty,
	applyDigitToSegment,
	applyBackspaceToSegment,
	incrementSegmentValue,
	clearSegmentValue,
	setSegmentNumeric,
	focusPartAfter,
	firstEmptyOrFirstPart,
	getEditablePartTypes,
	getSegmentBounds,
	segmentAriaName,
	segmentDisplayText,
	segmentNumericValue,
	getEditableSegmentIndices,
	maxSegmentLength,
	clampSegmentValue,
	incrementSegment,
} from '@ecopages/radiant-ui/helpers';

Building and reading

buildDateSegments returns the segments, literals included, in the locale's order. Editing functions return a new array and never change the one passed in.

Editing

Typed digits, Backspace and arrow-key steps, following the React Aria useDateSegment entry rules. focusNext says the segment is complete.