Localize: Format Dates
Features
- Small file size
- Uses
Intl.DateFormatbut 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>
`;