ADR012: Use Luxon.toLocaleString and date/time presets
Context
User's locales will have their own style of reading dates. It's counter
intuitive to not have dates formatted in their familiar formats, it can cause
users to have to think harder about what the date is and could even lead to
interpreting dates incorrectly (e.g. 05/03/2021, this could be March 5th or May
3rd, depending on where the user is). At the moment, plugins are defining dates
and times using custom formats and the toFormat
method, which leads to
inconsistent and unfamiliar formats.
Decision
To keep the UI consistent and familiar to users, irrespective of their location,
we have decided that we use toLocaleString
and Luxon's
extensive list
of Date and Time presets.
Here is an example:
const date = new luxon.DateTime();
/* Avoid this: */
date.toFormat('yyyy LLL dd'); // 2014 Aug 06
date.toFormat('yyyy LLL dd hh:mm'); // 2014 Aug 06 12:01
/* Do this instead: */
date.toLocaleString(luxon.DateTime.DATE_MED); // US: Oct 14, 1983 | FR: 14 oct. 1983
date.toLocaleString(luxon.DateTime.DATETIME_MED); // US: Oct 14, 1983, 9:30 | FR: 14 oct. 1983 9:30
Consequences
- We will need to audit the current places Date/Times are being displayed in the UI and update them to follow this ADR.
- We will need to keep in mind for reviewing PRs going forward to follow this ADR, or find/create a linting rule to automate this in the review process.