The format-datetime component is used to display a date and time in a human-readable format. The element API reflects the Intl.DateTimeFormat API.
Example
Formats and displays dates and times in localized formats.
code
<script type="module">
import '@blueprintui/components/include/format-datetime.js';
</script>
<bp-format-datetime date-style="long" time-style="long">2023-07-28T04:20:17.434Z</bp-format-datetime>Time
Shows time formatting with different time styles.
code
<script type="module">
import '@blueprintui/components/include/format-datetime.js';
</script>
<div bp-layout="block gap:md">
<bp-format-datetime time-style="long">2023-07-28T04:20:17.434Z</bp-format-datetime>
<bp-format-datetime time-style="short">2023-07-28T04:20:17.434Z</bp-format-datetime>
</div>Text
Demonstrates inline date-time formatting within text content.
test some text
code
<script type="module">
import '@blueprintui/components/include/format-datetime.js';
</script>
<p bp-text="content">test some text <bp-format-datetime date-style="long" time-style="long">2023-07-28T04:20:17.434Z</bp-format-datetime> test some text</p>Install
NPM
// npm package
import '@blueprintui/components/include/format-datetime.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/format-datetime.js/+esm';
</script>Accessibility
- Datetime formats should be localized to the user's locale. The
localeattribute can be used to set the locale. If no locale is provided, the user's locale will be used.
bp-format-datetime
Properties
| Name | Types | Description |
|---|---|---|
locale | string | Specifies the locale for date and time formatting |
weekday | 'long' | 'short' | 'narrow' | Controls the weekday representation in the formatted date |
year | 'numeric' | '2-digit' | Controls the year representation in the formatted date |
month | 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | Controls the month representation in the formatted date |
day | 'numeric' | '2-digit' | Controls the day representation in the formatted date |
hour | 'numeric' | '2-digit' | Controls the hour representation in the formatted time |
minute | 'numeric' | '2-digit' | Controls the minute representation in the formatted time |
second | 'numeric' | '2-digit' | Controls the second representation in the formatted time |
dateStyle | 'full' | 'long' | 'medium' | 'short' | Defines a preset formatting style for the date portion |
timeStyle | 'full' | 'long' | 'medium' | 'short' | Defines a preset formatting style for the time portion |
timeZoneName | 'long' | 'short' | Controls how the time zone name is displayed in the formatted datetime |
timeZone | string | Specifies the time zone to use for formatting |
Attributes
| Name | Types | Description |
|---|---|---|
locale | string | Specifies the locale for date and time formatting |
weekday | 'long' | 'short' | 'narrow' | Controls the weekday representation in the formatted date |
year | 'numeric' | '2-digit' | Controls the year representation in the formatted date |
month | 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | Controls the month representation in the formatted date |
day | 'numeric' | '2-digit' | Controls the day representation in the formatted date |
hour | 'numeric' | '2-digit' | Controls the hour representation in the formatted time |
minute | 'numeric' | '2-digit' | Controls the minute representation in the formatted time |
second | 'numeric' | '2-digit' | Controls the second representation in the formatted time |
date-style | 'full' | 'long' | 'medium' | 'short' | Defines a preset formatting style for the date portion |
time-style | 'full' | 'long' | 'medium' | 'short' | Defines a preset formatting style for the time portion |
time-zone-name | 'long' | 'short' | Controls how the time zone name is displayed in the formatted datetime |
time-zone | string | Specifies the time zone to use for formatting |