Format Date
<sl-format-date> | SlFormatDate
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.
<!-- Shoelace 2 release date 🎉 --> <sl-format-date date="2020-07-15T09:17:00-04:00"></sl-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 --> <sl-format-date month="long" day="numeric" year="numeric"></sl-format-date><br /> <!-- Time --> <sl-format-date hour="numeric" minute="numeric"></sl-format-date><br /> <!-- Weekday --> <sl-format-date weekday="long"></sl-format-date><br /> <!-- Month --> <sl-format-date month="long"></sl-format-date><br /> <!-- Year --> <sl-format-date year="numeric"></sl-format-date><br /> <!-- No formatting options --> <sl-format-date></sl-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.
<sl-format-date hour="numeric" minute="numeric" hour-format="12"></sl-format-date><br /> <sl-format-date hour="numeric" minute="numeric" hour-format="24"></sl-format-date>
Localization
Use the lang attribute to set the date/time formatting locale.
French:
Russian:
English: <sl-format-date lang="en"></sl-format-date><br /> French: <sl-format-date lang="fr"></sl-format-date><br /> Russian: <sl-format-date lang="ru"></sl-format-date>
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
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().
|
Date | string
|
new Date()
|
|
weekday
|
The format for displaying the weekday. |
'narrow' | 'short' | 'long'
|
- | |
era
|
The format for displaying the era. |
'narrow' | 'short' | 'long'
|
- | |
year
|
The format for displaying the year. |
'numeric' | '2-digit'
|
- | |
month
|
The format for displaying the month. |
'numeric' | '2-digit' | 'narrow' | 'short' | 'long'
|
- | |
day
|
The format for displaying the day. |
'numeric' | '2-digit'
|
- | |
hour
|
The format for displaying the hour. |
'numeric' | '2-digit'
|
- | |
minute
|
The format for displaying the minute. |
'numeric' | '2-digit'
|
- | |
second
|
The format for displaying the second. |
'numeric' | '2-digit'
|
- | |
timeZoneName
time-zone-name
|
The format for displaying the time. |
'short' | 'long'
|
- | |
timeZone
time-zone
|
The time zone to express the time in. |
string
|
- | |
hourFormat
hour-format
|
The format for displaying the hour. |
'auto' | '12' | '24'
|
'auto'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.