Format Date

<wa-format-date>

Stable

Formats a date or time for display using the specified locale and options. Powered by the Intl.DateTimeFormat API for consistent, localized output.

Localization is handled by the browser's Intl.DateTimeFormat API. No language packs are required.

<!-- Web Awesome 2 release date 🎉 -->
<wa-format-date date="2020-07-15T09:17:00-04:00"></wa-format-date>

The date attribute determines the date/time to use when formatting. It must be a string that Date.parse() can interpret or a Date object set via JavaScript. If omitted, the current date/time will be assumed.

When using strings, avoid ambiguous dates such as 03/04/2020 which can be interpreted as March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid ISO 8601 date time string to ensure the date will be parsed properly by all clients.

Examples

Link to This Section

Date & Time Formatting

Link to This Section

Formatting options are based on those found in the Intl.DateTimeFormat API. When formatting options are provided, the date/time will be formatted according to those values. When no formatting options are provided, a localized, numeric date will be displayed instead.

<!-- Human-readable date -->
<wa-format-date month="long" day="numeric" year="numeric"></wa-format-date><br />

<!-- Time -->
<wa-format-date hour="numeric" minute="numeric"></wa-format-date><br />

<!-- Weekday -->
<wa-format-date weekday="long"></wa-format-date><br />

<!-- Month -->
<wa-format-date month="long"></wa-format-date><br />

<!-- Year -->
<wa-format-date year="numeric"></wa-format-date><br />

<!-- No formatting options -->
<wa-format-date></wa-format-date>

Hour Formatting

Link to This Section

By default, the browser will determine whether to use 12-hour or 24-hour time. To force one or the other, set the hour-format attribute to 12 or 24.

<wa-format-date hour="numeric" minute="numeric" hour-format="12"></wa-format-date><br />
<wa-format-date hour="numeric" minute="numeric" hour-format="24"></wa-format-date>

Localization

Link to This Section

Use the lang attribute to set the date/time formatting locale.

English: 

French: 

Russian:

English: <wa-format-date lang="en"></wa-format-date><br />
French: <wa-format-date lang="fr"></wa-format-date><br />
Russian: <wa-format-date lang="ru"></wa-format-date>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/format-date/format-date.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/format-date/format-date.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/format-date/format-date.js';

To import this component for React 18 or below, use the following code:

import WaFormatDate from '@awesome.me/webawesome/dist/react/format-date/index.js';

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`date` `date`	The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use `date.toISOString()`. Type `Date \| string` Default `new Date()`
`day` `day`	The format for displaying the day. Type `'numeric' \| '2-digit'`
`era` `era`	The format for displaying the era. Type `'narrow' \| 'short' \| 'long'`
`hour` `hour`	The format for displaying the hour. Type `'numeric' \| '2-digit'`
`hourFormat` `hour-format`	The format for displaying the hour. Type `'auto' \| '12' \| '24'` Default `'auto'`
`minute` `minute`	The format for displaying the minute. Type `'numeric' \| '2-digit'`
`month` `month`	The format for displaying the month. Type `'numeric' \| '2-digit' \| 'narrow' \| 'short' \| 'long'`
`second` `second`	The format for displaying the second. Type `'numeric' \| '2-digit'`
`timeZone` `time-zone`	The time zone to express the time in. Type `string`
`timeZoneName` `time-zone-name`	The format for displaying the time. Type `'short' \| 'long'`
`weekday` `weekday`	The format for displaying the weekday. Type `'narrow' \| 'short' \| 'long'`
`year` `year`	The format for displaying the year. Type `'numeric' \| '2-digit'`

Need a hand?

Report a bug

Ask for help

Format Date

Examples

Date & Time Formatting

Hour Formatting

Localization

Importing

Attributes & Properties

Quick Links

Recent Searches