Date and time
How to format dates and times in interface text.
Overview
Use the international date format. No comma between month and year; no ordinal suffix; no leading zero.
✅ Do
❌ Don’t
Use the 24-hour system. Do not write a.m. or p.m. Do not use the word hours.
✅ Do
❌ Don’t
❌ Don’t
❌ Don’t
These are guidelines from the WFP Editorial Style Guide. The rest of this page offers specific guidance for interfaces.
Use Intl.DateTimeFormat
To format dates and times correctly, use Intl.DateTimeFormat – a built-in JavaScript function that formats dates and times according to your selected locale and preferences.
To localize dates and times, pass a locale as the first argument:
| Language | Locale code |
|---|---|
| English (British) | en-GB |
| French | fr |
| Spanish | es |
| Arabic | ar |
Intl.NumberFormat sometimes differs from the WFP Editorial Style Guide. Always prioritize Intl.NumberFormat.
See examples below.
Date
Use dateStyle: "long" by default, and dateStyle: "medium" as a compact
alternative.
19 December 1961
19 Dec 1961
const value = new Date(Date.UTC(1961, 11, 19, 17, 45, 0));
const formatDate = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long",
}).format(value);
const formatDateCompact = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
}).format(value);Time
Use timeStyle: "short".
17:45
const value = new Date(Date.UTC(1961, 11, 19, 17, 45, 0));
const formatTime = new Intl.DateTimeFormat("en-GB", {
timeStyle: "short",
}).format(value);Date and time
Combine dateStyle and timeStyle for date and time.
19 December 1961 at 17:45
19 Dec 1961, 17:45
const value = new Date(Date.UTC(1961, 11, 19, 17, 45, 0));
const formatDateTime = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long",
timeStyle: "short",
}).format(value);
const formatDateTimeCompact = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
timeStyle: "short",
}).format(value);Date range
To format multiple dates, use formatDateRange.
Date range within a month
26 – 28 February 2024
26 – 28 Feb 2024
const value1 = new Date(Date.UTC(2024, 01, 26));
const value2 = new Date(Date.UTC(2024, 01, 28));
const formatDateRange = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long",
}).format(value1, value2);
const formatDateRangeCompact = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
}).format(value1, value2);Date range across months
9 October – 10 December 2020
9 Oct – 10 Dec 2020
const value1 = new Date(Date.UTC(2020, 09, 09));
const value2 = new Date(Date.UTC(2020, 11, 10));
const formatDateRange = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long",
}).format(value1, value2);
const formatDateRangeCompact = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
}).format(value1, value2);Date range across years
1 January 1963 – 31 December 1965
1 Jan 1963 – 31 Dec 1965
const value1 = new Date(Date.UTC(1963, 00, 01));
const value2 = new Date(Date.UTC(1965, 11, 31));
const formatDateRange = new Intl.DateTimeFormat("en-GB", {
dateStyle: "long",
}).format(value1, value2);
const formatDateRangeCompact = new Intl.DateTimeFormat("en-GB", {
dateStyle: "medium",
}).format(value1, value2);This differs from the WFP Editorial Style Guide, which does not add spaces around the en dash.
Localization examples
For default English use en-GB as the locale. For French use fr, for Spanish use es, for Arabic use ar, etc.
19 décembre 1961 à 17:45
19 déc. 1961, 17:45
19 de diciembre de 1961 a las 17:45
19 dic 1961, 17:45
19 ديسمبر 1961 في 5:45 م
Arabic
19/12/1961، 5:45 م
Arabic (compact)
const value = new Date(Date.UTC(1961, 11, 19, 17, 45, 0));
const french = new Intl.DateTimeFormat("fr", {
dateStyle: "long",
timeStyle: "short",
}).format(value);
const frenchCompact = new Intl.DateTimeFormat("fr", {
dateStyle: "medium",
timeStyle: "short",
}).format(value);
const spanish = new Intl.DateTimeFormat("es", {
dateStyle: "long",
timeStyle: "short",
}).format(value);
const spanishCompact = new Intl.DateTimeFormat("es", {
dateStyle: "medium",
timeStyle: "short",
}).format(value);
const arabic = new Intl.DateTimeFormat("ar", {
dateStyle: "long",
timeStyle: "short",
}).format(value);
const arabicCompact = new Intl.DateTimeFormat("ar", {
dateStyle: "medium",
timeStyle: "short",
}).format(value);