Date & Time
<quiet-date>
Outputs a date or time in the specified format.
<quiet-date></quiet-date>
If you pass a string to the date attribute, always use the
ISO 8601 format. Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the
client's locale.
Examples Jump to heading
Simple formatting Jump to heading
This component supports most options from
Intl.DateTimeFormat()
in a declarative syntax. It's very flexible, but it can be a bit verbose to output a simple date or time
with individual properties. Fortunately, there are two shortcuts you can use to easily output dates and
times in desirable formats.
The date-style and time-style attributes both accept full,
long, medium, and short as options. These attributes can be used
together, but they cannot be combined with other date-time formatting options.
Date style
Time style
Date + time style
<h4>Date style</h4> <quiet-date date-style="short" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date date-style="medium" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date date-style="long" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date date-style="full" date="2024-01-01 12:00:00"></quiet-date> <h4>Time style</h4> <quiet-date time-style="short" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date time-style="medium" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date time-style="long" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date time-style="full" date="2024-01-01 12:00:00"></quiet-date> <h4>Date + time style</h4> <quiet-date date-style="short" time-style="short" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date date-style="medium" time-style="medium" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date date-style="long" time-style="long" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date date-style="full" time-style="full" date="2024-01-01 12:00:00"></quiet-date>
Advanced formatting Jump to heading
More advanced formatting can be achieved through other formatting properties. The presence of an option tells the component to output a corresponding value.
To show the current time with hours and minutes using a 24 hour clock, use the hour,
minute, and hour-format attributes.
<quiet-date hour="numeric" minute="numeric" hour-format="24"></quiet-date>
Similarly, to show a date with just the month and day, use the month and
day attributes.
<quiet-date month="long" day="numeric"></quiet-date>
You can combine options to format a more complex date. The order of the attributes doesn't matter. The output will be rendered in a logical order.
<quiet-date weekday="long" month="short" day="numeric" year="numeric"></quiet-date>
Refer to the
Intl.DateTimeFormat()
documentation for more information about what options do and the values they accept.
Localization Jump to heading
Set the lang attribute on the element to change the language.
<quiet-date lang="es" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date lang="de" date="2024-01-01 12:00:00"></quiet-date><br> <quiet-date lang="ru" date="2024-01-01 12:00:00"></quiet-date>
This component also updates based on the page's language, which can be set using
<html lang="…">.
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-date> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/date/date.js';
To manually import <quiet-date> from npm, use the following code.
import '@quietui/quiet/dist/components/date/date.js';
Properties Jump to heading
Date & Time has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
date
|
The date to format. If an attribute is passed, the date should be an
ISO 8601 string. If set as a property, a Date object can be used instead. If unset, the current date
will be assumed.
|
|
Date
|
new Date()
|
dateStyle
date-style
|
A shortcut property for formatting the date. This can be used with time-style, but not
with other formatting properties such as weekday, hour,
month, etc.
|
|
'full'
|
|
timeStyle
time-style
|
A shortcut property for formatting the time. This can be used with date-style, but not
with other formatting properties such as weekday, hour,
month, etc.
|
|
'full'
|
|
hourFormat
hour-format
|
Whether to use 12-hour time (as opposed to 24-hour time). If auto, the default value is
determined by the user's locale.
|
|
'auto'
|
'auto'
|
hourCycle
|
The hour cycle to use. |
|
'h11'
|
|
timeZone
time-zone
|
The time zone to use. The default is the user's default time zone. |
|
string
|
|
weekday
|
The representation of the weekday. |
|
'long'
|
|
era
|
The representation of the era. |
|
'long'
|
|
year
|
The representation of the year. |
|
'numeric'
|
|
month
|
The representation of the month. |
|
'numeric'
|
|
day
|
The representation of the day. |
|
'numeric'
|
|
dayPeriod
day-period
|
The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an effect if a 12-hour clock is used. |
|
'long'
|
|
hour
|
The representation of the hour. |
|
'numeric'
|
|
minute
|
The representation of the minute. |
|
'numeric'
|
|
second
|
The representation of the second. |
|
'numeric'
|
|
fractionalSecondDigits
fractional-second-digits
|
The number of digits used to represent fractions of a second (any additional digits are truncated). |
|
1
|
|
timeZoneName
time-zone-name
|
The localized representation of the time zone name. |
|
'long'
|
|
formatMatcher
format-matcher
|
The format matching algorithm to use. |
|
'basic'
|