Skip to main content

Improved: DateField locale formatting and picker behavior

DateField in @trackunit/react-form-components now displays, parses, and hints dates using the user's regional locale while continuing to emit canonical YYYY-MM-DD values to consumers.

What changed​

DateField now uses the browser's region-qualified locale, such as en-GB, en-US, or da-DK, for visible date formatting and placeholders. This means users see date formats that match their regional preference, for example dd/mm/yyyy in the United Kingdom and mm/dd/yyyy in the United States.

Change and blur events still expose canonical date-only values through event.target.value, so existing integrations can continue storing and sending YYYY-MM-DD values.

New DateField options​

locale​

Override the locale for a specific field when a fixed regional format is required.

<DateField label="Start date" locale="en-GB" />

openOnFocus​

Open the date picker automatically when the input receives focus, for example when users tab through a form.

<DateField label="Start date" openOnFocus />

onPickerClose​

Run logic when the calendar picker closes, without waiting for the input itself to blur. The callback receives the canonical value and a close reason: apply, clear, cancel, or outside.

<DateField
  label="Start date"
  onPickerClose={(event, reason) => {
    if (reason === "cancel") return;
    validateDate(event.target.value);
  }}
/>

Picker accessibility​

The DateField calendar picker has improved focus handling and keyboard navigation. Keyboard users can move between dates with arrow keys and commit the focused date from the picker.

Popover focus support​

PopoverContent in @trackunit/react-components now supports an initialFocus prop for cases where popover content should receive focus when opened.