Lion Logo Lion Fundamentals Guides Components Blog Toggle darkmode

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 05/12/1987
kok 05/12/1987
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 12/05/1987
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!