Format Date
<wa-format-date>
Formats a date/time using the specified locale and options.
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
Jump to heading
Date & Time Formatting
Jump to heading
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
Jump to heading
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
Jump to heading
Use the lang attribute to set the date/time formatting locale.
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
Jump to heading
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.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/webawesome@0.14.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
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefined |
||
datedate |
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 | stringDefault
new Date() |
||
dayday |
The format for displaying the day.
Type
'numeric' | '2-digit' |
||
eraera |
The format for displaying the era.
Type
'narrow' | 'short' | 'long' |
||
hourhour |
The format for displaying the hour.
Type
'numeric' | '2-digit' |
||
hourFormathour-format |
The format for displaying the hour.
Type
'auto' | '12' | '24'Default
'auto' |
||
minuteminute |
The format for displaying the minute.
Type
'numeric' | '2-digit' |
||
monthmonth |
The format for displaying the month.
Type
'numeric' | '2-digit' | 'narrow' | 'short' | 'long' |
||
secondsecond |
The format for displaying the second.
Type
'numeric' | '2-digit' |
||
timeZonetime-zone |
The time zone to express the time in.
Type
string |
||
timeZoneNametime-zone-name |
The format for displaying the time.
Type
'short' | 'long' |
||
weekdayweekday |
The format for displaying the weekday.
Type
'narrow' | 'short' | 'long' |
||
yearyear |
The format for displaying the year.
Type
'numeric' | '2-digit' |