3.0.0-alpha.4 Alpha
Light Dark Light Dark System Search /

Format Date

<wa-format-date> Since 2.0 stable

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

Date & Time Formatting

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

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

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>

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()
weekday
weekday
The format for displaying the weekday.
Type 'narrow' | 'short' | 'long'
era
era
The format for displaying the era.
Type 'narrow' | 'short' | 'long'
year
year
The format for displaying the year.
Type 'numeric' | '2-digit'
month
month
The format for displaying the month.
Type 'numeric' | '2-digit' | 'narrow' | 'short' | 'long'
day
day
The format for displaying the day.
Type 'numeric' | '2-digit'
hour
hour
The format for displaying the hour.
Type 'numeric' | '2-digit'
minute
minute
The format for displaying the minute.
Type 'numeric' | '2-digit'
second
second
The format for displaying the second.
Type 'numeric' | '2-digit'
timeZoneName
time-zone-name
The format for displaying the time.
Type 'short' | 'long'
timeZone
time-zone
The time zone to express the time in.
Type string
hourFormat
hour-format
The format for displaying the hour.
Type 'auto' | '12' | '24'
Default 'auto'

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code.

import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/format-date/format-date.js';
 Coming soon! Coming soon!
    No results