Lion Logo Lion Guides Components Docs 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>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Output</th>
        <th>Options</th>
        <th>Code</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>___HTML_1___</td>
        <td>Default</td>
        <td><code>formatDate(new Date('1987/05/12'))</code></td>
      </tr>
      <tr>
        <td>
          ___HTML_2___
        </td>
        <td>Date display</td>
        <td>
          <code
            >formatDate(new Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
          >
        </td>
      </tr>
      <tr>
        <td>
          ___HTML_3___
        </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>
          ___HTML_4___
        </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>
          ___HTML_5___
        </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>___HTML_6___</td>
        <td>Locale</td>
        <td><code>formatDate(new Date('1987/05/12'){ locale:'nl-NL' })</code></td>
      </tr>
    </tbody>
  </table>
`;

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>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <thead>
      <tr>
        <th>Locale</th>
        <th>Output</th>
      </tr>
    </thead>
    <tbody>
      ___HTML_1___
    </tbody>
  </table>
`;

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>
    ___HTML_0___
  </style>
  <table class="demo-table">
    <tr>
      <th>Locale</th>
      <th>Output</th>
    </tr>
    ___HTML_1___
  </table>
`;