Localize: Format Dates

Features

Small file size
Uses Intl.DateFormat but patches browser inconsistencies

Formatting

With the formatDate you can safely display dates for all languages.

The input value is new Date('1987/05/12').

export const formatting = () => html`
  <style>
    ${formatDateDemoStyle}
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Output</th>
        <th>Options</th>
        <th>Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>${formatDate(new Date('1987/05/12'))}</td>
        <td>Default</td>
        <td><code>formatDate(new Date('1987/05/12'))</code></td>
      </tr>
      <tr>
        <td>
          ${formatDate(new Date('1987/05/12'), {
            weekday: 'long',
            year: 'numeric',
            month: 'long',
            day: '2-digit',
          })}
        </td>
        <td>Date display</td>
        <td>
          <code
            >formatDate(new Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
          >
        </td>
      </tr>
      <tr>
        <td>
          ${formatDate(new Date('1987/05/12'), {
            weekday: 'long',
            month: 'long',
            day: '2-digit',
          })}
        </td>
        <td>Date without year</td>
        <td>
          <code>
            formatDate(new Date('1987/05/12'), {weekday:'long',month:'long',day:'2-digit'})
          </code>
        </td>
      </tr>
      <tr>
        <td>
          ${formatDate(new Date('1987/05/12'), {
            weekday: 'long',
            year: 'numeric',
            day: '2-digit',
          })}
        </td>
        <td>Date without month</td>
        <td>
          <code>
            formatDate(new Date('1987/05/12'), {weekday:'long',year:'numeric',day:'2-digit'})
          </code>
        </td>
      </tr>
      <tr>
        <td>
          ${formatDate(new Date('1987/05/12'), {
            weekday: 'long',
            month: 'long',
            year: 'numeric',
          })}
        </td>
        <td>Date without day</td>
        <td>
          <code>
            formatDate(new Date('1987/05/12'), { weekday:'long',year:'numeric',month:'long' })
          </code>
        </td>
      </tr>
      <tr>
        <td>${formatDate(new Date('1987/05/12'), { locale: 'nl-NL' })}</td>
        <td>Locale</td>
        <td><code>formatDate(new Date('1987/05/12'){ locale:'nl-NL' })</code></td>
      </tr>
    </tbody>
  </table>
`;

Output	Options	Code
12/05/1987	Default	`formatDate(new Date('1987/05/12'))`
Tuesday, 12 May 1987	Date display	`formatDate(new Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})`
Tuesday, 12 May	Date without year	`formatDate(new Date('1987/05/12'), {weekday:'long',month:'long',day:'2-digit'})`
Tuesday 12 1987	Date without month	`formatDate(new Date('1987/05/12'), {weekday:'long',year:'numeric',day:'2-digit'})`
May 1987 Tuesday	Date without day	`formatDate(new Date('1987/05/12'), { weekday:'long',year:'numeric',month:'long' })`
12-05-1987	Locale	`formatDate(new Date('1987/05/12'){ locale:'nl-NL' })`

List common locales

The input value is new Date('1987/05/12'). Formatting happens via

formatDate(new Date('1987/05/12'), { locale });

export const listCommonLocales = () => html`
  <style>
    ${formatDateDemoStyle}
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Locale</th>
        <th>Output</th>
      </tr>
    </thead>
    <tbody>
      ${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
        locale => html`
          <tr>
            <td>${locale}</td>
            <td>${formatDate(new Date('1987/05/12'), { locale })}</td>
          </tr>
        `,
      )}
    </tbody>
  </table>
`;

Locale	Output
en-GB	12/05/1987
en-US	05/12/1987
nl-NL	12-05-1987
nl-BE	12/05/1987
fr-FR	12/05/1987
de-DE	12.05.1987

List all locales

The following list shows date formatting for all known locales.

The input value is new Date('1987/05/12'). Formatting happens via

formatDate(new Date('1987/05/12'), { locale });

export const listAllLocales = () => html`
  <style>
    ${formatDateDemoStyle}
  </style>
  <table class="demo-table">
    <tr>
      <th>Locale</th>
      <th>Output</th>
    </tr>
    ${Object.keys(allLocales).map(
      locale => html`
        <tr>
          <td>${locale}</td>
          <td>${formatDate(new Date('1987/05/12'), { locale })}</td>
        </tr>
      `,
    )}
  </table>
`;

Locale	Output
af-ZA	1987-05-12
af	1987-05-12
ak-GH	1987/05/12
ak	1987/05/12
sq-AL	05/12/1987
sq	05/12/1987
am-ET	12/05/1987
am	12/05/1987
ar-DZ	12‏/05‏/1987
ar-BH	١٢‏/٠٥‏/١٩٨٧
ar-EG	١٢‏/٠٥‏/١٩٨٧
ar-IQ	١٢‏/٠٥‏/١٩٨٧
ar-JO	١٢‏/٠٥‏/١٩٨٧
ar-KW	١٢‏/٠٥‏/١٩٨٧
ar-LB	١٢‏/٠٥‏/١٩٨٧
ar-LY	12‏/05‏/1987
ar-MA	12‏/05‏/1987
ar-OM	١٢‏/٠٥‏/١٩٨٧
ar-QA	١٢‏/٠٥‏/١٩٨٧
ar-SA	١٢‏/٠٥‏/١٩٨٧
ar-SD	١٢‏/٠٥‏/١٩٨٧
ar-SY	١٢‏/٠٥‏/١٩٨٧
ar-TN	12‏/05‏/1987
ar-AE	12‏/05‏/1987
ar-YE	١٢‏/٠٥‏/١٩٨٧
ar	12‏/05‏/1987
hy-AM	05/12/1987
hy	05/12/1987
as-IN	05/12/1987
as	05/12/1987
asa-TZ	05/12/1987
asa	05/12/1987
az-Cyrl	12.05.1987
az-Cyrl-AZ	12.05.1987
az-Latn	1987-05-12
az-Latn-AZ	1987-05-12
az	1987-05-12
bm-ML	05/12/1987
bm	05/12/1987
eu-ES	05/12/1987
eu	05/12/1987
be-BY	05/12/1987
be	05/12/1987
bem-ZM	05/12/1987
bem	05/12/1987
bez-TZ	05/12/1987
bez	05/12/1987
bn-BD	১২/০৫/১৯৮৭
bn-IN	১২/০৫/১৯৮৭
bn	১২/০৫/১৯৮৭
bs-BA	1987-05-12
bs	1987-05-12
bg-BG	12.05.1987 г.
bg	12.05.1987 г.
my-MM	05/12/1987
my	05/12/1987
yue-Hant-HK	05/12/1987
ca-ES	12/05/1987
ca	12/05/1987
tzm-Latn	05/12/1987
tzm-Latn-MA	05/12/1987
tzm	05/12/1987
chr-US	05/12/1987
chr	05/12/1987
cgg-UG	05/12/1987
cgg	05/12/1987
zh-Hans	1987/05/12
zh-Hans-CN	1987/05/12
zh-Hans-HK	12/05/1987
zh-Hans-MO	1987年05月12日
zh-Hans-SG	1987年05月12日
zh-Hant	1987/05/12
zh-Hant-HK	12/05/1987
zh-Hant-MO	12/05/1987
zh-Hant-TW	1987/05/12
zh	1987/05/12
kw-GB	05/12/1987
kw	05/12/1987
hr-HR	12. 05. 1987.
hr	12. 05. 1987.
cs-CZ	12. 05. 1987
cs	12. 05. 1987
da-DK	12.05.1987
da	12.05.1987
nl-BE	12/05/1987
nl-NL	12-05-1987
nl	12-05-1987
ebu-KE	05/12/1987
ebu	05/12/1987
en-AS	05/12/1987
en-AU	12/05/1987
en-BE	12/05/1987
en-BZ	12/05/1987
en-BW	12/05/1987
en-CA	1987-05-12
en-GU	05/12/1987
en-HK	12/05/1987
en-IN	12/05/1987
en-IE	12/05/1987
en-IL	12/05/1987
en-JM	12/05/1987
en-MT	12/05/1987
en-MH	05/12/1987
en-MU	12/05/1987
en-NA	12/05/1987
en-NZ	12/05/1987
en-MP	05/12/1987
en-PK	12/05/1987
en-PH	05/12/1987
en-SG	12/05/1987
en-ZA	1987/05/12
en-TT	12/05/1987
en-UM	05/12/1987
en-VI	05/12/1987
en-GB	12/05/1987
en-US	05/12/1987
en-ZW	12/05/1987
en	05/12/1987
eo	05/12/1987
et-EE	12.05.1987
et	12.05.1987
ee-GH	05/12/1987
ee-TG	1987-05-12
ee	05/12/1987
fo-FO	05/12/1987
fo	05/12/1987
fil-PH	05/12/1987
fil	05/12/1987
fi-FI	12.05.1987
fi	12.05.1987
fr-BE	12/05/1987
fr-BJ	12/05/1987
fr-BF	12/05/1987
fr-BI	12/05/1987
fr-CM	12/05/1987
fr-CA	1987-05-12
fr-CF	12/05/1987
fr-TD	12/05/1987
fr-KM	12/05/1987
fr-CG	12/05/1987
fr-CD	12/05/1987
fr-CI	12/05/1987
fr-DJ	12/05/1987
fr-GQ	12/05/1987
fr-FR	12/05/1987
fr-GA	12/05/1987
fr-GP	12/05/1987
fr-GN	12/05/1987
fr-LU	12/05/1987
fr-MG	12/05/1987
fr-ML	12/05/1987
fr-MQ	12/05/1987
fr-MC	12/05/1987
fr-NE	12/05/1987
fr-RW	12/05/1987
fr-RE	12/05/1987
fr-BL	12/05/1987
fr-MF	12/05/1987
fr-SN	12/05/1987
fr-CH	12.05.1987
fr-TG	12/05/1987
fr	12/05/1987
ff-SN	05/12/1987
ff	05/12/1987
gl-ES	05/12/1987
gl	05/12/1987
lg-UG	05/12/1987
lg	05/12/1987
ka-GE	05/12/1987
ka	05/12/1987
de-AT	12.05.1987
de-BE	12.05.1987
de-DE	12.05.1987
de-LI	12.05.1987
de-LU	12.05.1987
de-CH	12.05.1987
de	12.05.1987
el-CY	12/05/1987
el-GR	12/05/1987
el	12/05/1987
gu-IN	12/05/1987
gu	12/05/1987
guz-KE	05/12/1987
guz	05/12/1987
ha-Latn	05/12/1987
ha-Latn-GH	05/12/1987
ha-Latn-NE	05/12/1987
ha-Latn-NG	05/12/1987
ha	05/12/1987
haw-US	05/12/1987
haw	05/12/1987
he-IL	12.05.1987
he	12.05.1987
hi-IN	12/05/1987
hi	12/05/1987
hu-HU	1987. 05. 12.
hu	1987. 05. 12.
is-IS	05/12/1987
is	05/12/1987
ig-NG	05/12/1987
ig	05/12/1987
id-ID	12/05/1987
id	12/05/1987
ga-IE	05/12/1987
ga	05/12/1987
it-IT	12/05/1987
it-CH	12.05.1987
it	12/05/1987
ja-JP	1987/05/12
ja	1987/05/12
kea-CV	05/12/1987
kea	05/12/1987
kab-DZ	05/12/1987
kab	05/12/1987
kl-GL	05/12/1987
kl	05/12/1987
kln-KE	05/12/1987
kln	05/12/1987
kam-KE	05/12/1987
kam	05/12/1987
kn-IN	12/05/1987
kn	12/05/1987
kk-Cyrl	05/12/1987
kk-Cyrl-KZ	05/12/1987
kk	05/12/1987
km-KH	05/12/1987
km	05/12/1987
ki-KE	05/12/1987
ki	05/12/1987
rw-RW	05/12/1987
rw	05/12/1987
kok-IN	1987-05-12
kok	1987-05-12
ko-KR	1987. 05. 12.
ko	1987. 05. 12.
khq-ML	05/12/1987
khq	05/12/1987
ses-ML	05/12/1987
ses	05/12/1987
lag-TZ	05/12/1987
lag	05/12/1987
lv-LV	12.05.1987
lv	12.05.1987
lt-LT	1987-05-12
lt	1987-05-12
luo-KE	05/12/1987
luo	05/12/1987
luy-KE	05/12/1987
luy	05/12/1987
mk-MK	05/12/1987
mk	05/12/1987
jmc-TZ	05/12/1987
jmc	05/12/1987
kde-TZ	05/12/1987
kde	05/12/1987
mg-MG	05/12/1987
mg	05/12/1987
ms-BN	12/05/1987
ms-MY	12/05/1987
ms	12/05/1987
ml-IN	12/05/1987
ml	12/05/1987
mt-MT	05/12/1987
mt	05/12/1987
gv-GB	05/12/1987
gv	05/12/1987
mr-IN	१२/०५/१९८७
mr	१२/०५/१९८७
mas-KE	05/12/1987
mas-TZ	05/12/1987
mas	05/12/1987
mer-KE	05/12/1987
mer	05/12/1987
mfe-MU	05/12/1987
mfe	05/12/1987
naq-NA	05/12/1987
naq	05/12/1987
ne-IN	1987-05-12
ne-NP	05/12/1987
ne	05/12/1987
nd-ZW	05/12/1987
nd	05/12/1987
nb-NO	12.05.1987
nb	12.05.1987
nn-NO	05/12/1987
nn	05/12/1987
nyn-UG	05/12/1987
nyn	05/12/1987
or-IN	05/12/1987
or	05/12/1987
om-ET	05/12/1987
om-KE	1987-05-12
om	05/12/1987
ps-AF	05/12/1987
ps	05/12/1987
fa-AF	۱۳۶۶/۰۲/۲۲
fa-IR	۱۳۶۶/۰۲/۲۲
fa	۱۳۶۶/۰۲/۲۲
pl-PL	12.05.1987
pl	12.05.1987
pt-BR	12/05/1987
pt-GW	12/05/1987
pt-MZ	12/05/1987
pt-PT	12/05/1987
pt	12/05/1987
pa-Arab	۱۲/۰۵/۱۹۸۷
pa-Arab-PK	۱۲/۰۵/۱۹۸۷
pa-Guru	1987-05-12
pa-Guru-IN	1987-05-12
pa	1987-05-12
ro-MD	12.05.1987
ro-RO	12.05.1987
ro	12.05.1987
rm-CH	05/12/1987
rm	05/12/1987
rof-TZ	05/12/1987
rof	05/12/1987
ru-MD	12.05.1987
ru-RU	12.05.1987
ru-UA	12.05.1987
ru	12.05.1987
rwk-TZ	05/12/1987
rwk	05/12/1987
saq-KE	05/12/1987
saq	05/12/1987
sg-CF	05/12/1987
sg	05/12/1987
seh-MZ	05/12/1987
seh	05/12/1987
sr-Cyrl	12.05.1987.
sr-Cyrl-BA	12.05.1987.
sr-Cyrl-ME	12.05.1987.
sr-Cyrl-RS	12.05.1987.
sr-Latn	12.05.1987.
sr-Latn-BA	12.05.1987.
sr-Latn-ME	12.05.1987.
sr-Latn-RS	12.05.1987.
sr	12.05.1987.
sn-ZW	05/12/1987
sn	05/12/1987
ii-CN	05/12/1987
ii	05/12/1987
si-LK	05/12/1987
si	05/12/1987
sk-SK	12. 05. 1987
sk	12. 05. 1987
sl-SI	12. 05. 1987
sl	12. 05. 1987
xog-UG	05/12/1987
xog	05/12/1987
so-DJ	05/12/1987
so-ET	05/12/1987
so-KE	12/05/1987
so-SO	05/12/1987
so	05/12/1987
es-AR	12/05/1987
es-BO	12/05/1987
es-CL	12-05-1987
es-CO	12/05/1987
es-CR	12/05/1987
es-DO	12/05/1987
es-EC	12/05/1987
es-SV	12/05/1987
es-GQ	12/05/1987
es-GT	12/05/1987
es-HN	12/05/1987
es-419	12/05/1987
es-MX	12/05/1987
es-NI	12/05/1987
es-PA	05/12/1987
es-PY	12/05/1987
es-PE	12/05/1987
es-PR	05/12/1987
es-ES	12/05/1987
es-US	12/05/1987
es-UY	12/05/1987
es-VE	12/05/1987
es	12/05/1987
sw-KE	12/05/1987
sw-TZ	12/05/1987
sw	12/05/1987
sv-FI	1987-05-12
sv-SE	1987-05-12
sv	1987-05-12
gsw-CH	05/12/1987
gsw	05/12/1987
shi-Latn	05/12/1987
shi-Latn-MA	05/12/1987
shi-Tfng	05/12/1987
shi-Tfng-MA	05/12/1987
shi	05/12/1987
dav-KE	05/12/1987
dav	05/12/1987
ta-IN	12/05/1987
ta-LK	12/05/1987
ta	12/05/1987
te-IN	12-05-1987
te	12-05-1987
teo-KE	05/12/1987
teo-UG	05/12/1987
teo	05/12/1987
th-TH	12/05/2530
th	12/05/2530
bo-CN	05/12/1987
bo-IN	05/12/1987
bo	05/12/1987
ti-ER	1987-05-12
ti-ET	05/12/1987
ti	05/12/1987
to-TO	05/12/1987
to	05/12/1987
tr-TR	12.05.1987
tr	12.05.1987
uk-UA	12.05.1987
uk	12.05.1987
ur-IN	۱۲/۰۵/۱۹۸۷
ur-PK	12/05/1987
ur	12/05/1987
uz-Arab	AP ۱۳۶۶-۰۲-۲۲
uz-Arab-AF	۱۳۶۶-۰۲-۲۲
uz-Cyrl	12/05/1987
uz-Cyrl-UZ	12/05/1987
uz-Latn	1987-05-12
uz-Latn-UZ	1987-05-12
uz	1987-05-12
vi-VN	12/05/1987
vi	12/05/1987
vun-TZ	05/12/1987
vun	05/12/1987
cy-GB	05/12/1987
cy	05/12/1987
yo-NG	05/12/1987
yo	05/12/1987
zu-ZA	05/12/1987
zu	05/12/1987

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!