Date picker now displays DD/MM/YYYY for all users
Date picker now displays DD/MM/YYYY for all users
The date picker used in HAPI Elements widgets (contract expiry and posting-requirement date fields) now displays dates in the DD/MM/YYYY format for every user, regardless of locale. Previously the format depended on the user's locale and most commonly resolved to the US-style MM/DD/YYYY. The new format aligns with the conventions used by the majority of HAPI Elements integrators outside the US.
What integrators see
The visible date string inside the picker input — for example on the Contract Expiry field in the contract create flow and on date-typed posting requirement fields in the campaign create flow — now reads as e.g. 31/12/2025 for every user.
The placeholder shown when no date is selected has been updated to include the format hint in the user's language:
- en:
Select a Date (DD/MM/YYYY) - de:
Datum auswählen (TT/MM/JJJJ) - nl:
Selecteer een Datum (DD/MM/JJJJ) - fr:
Sélectionner une date (JJ/MM/AAAA) - es:
Seleccione una fecha (DD/MM/AAAA) - it:
Seleziona una Data (GG/MM/AAAA)
Backwards compatibility
This is a display-only change. The widget's public surface is unchanged:
- The HTML element IDs and CSS classes on the date picker (
hapi__date-picker,hapi__form-date-picker,contract-add-optional-details-contract-expiry-date-picker,campaign-create-form-posting-requirements-date-picker, …) are unchanged. - The string content of
window.hapi.contract.state.contractForm.expiry_dateis unchanged — it continues to be formatted with the user's locale via the existingreact-intlshort-date format. If your integration reads this field, no migration is required. - The wire format sent to HAPI for
/contractsis unchanged — the SDK continues to parse the locale-formatted string and send ISO 8601 (YYYY-MM-DDT23:59:59.999Z) to the backend. - Posting-requirement DATE field values sent to channels are unchanged — when the channel publishes a specific date format rule, that format is honoured.
If you have automated tests that screenshot or text-match the date string visible inside the picker input, those snapshots will need to be regenerated.
I18n
The placeholder translation value has been updated. The translation key (common.select-a-date-placeholder) is unchanged.
| Key | "en" value | "de" value | "nl" value | "fr" value | "es" value | "it" value |
|---|---|---|---|---|---|---|
| common.select-a-date-placeholder | Select a Date (DD/MM/YYYY) | Datum auswählen (TT/MM/JJJJ) | Selecteer een Datum (DD/MM/JJJJ) | Sélectionner une date (JJ/MM/AAAA) | Seleccione una fecha (DD/MM/AAAA) | Seleziona una Data (GG/MM/AAAA) |