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
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
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
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
locale
attribute 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 | |
weekday | 'long' | 'short' | 'narrow' | |
year | 'numeric' | '2-digit' | |
month | 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | |
day | 'numeric' | '2-digit' | |
hour | 'numeric' | '2-digit' | |
minute | 'numeric' | '2-digit' | |
second | 'numeric' | '2-digit' | |
dateStyle | 'full' | 'long' | 'medium' | 'short' | |
timeStyle | 'full' | 'long' | 'medium' | 'short' | |
timeZoneName | 'long' | 'short' | |
timeZone | string |
Attributes
Name | Types | Description |
---|---|---|
locale | string | |
weekday | 'long' | 'short' | 'narrow' | |
year | 'numeric' | '2-digit' | |
month | 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | |
day | 'numeric' | '2-digit' | |
hour | 'numeric' | '2-digit' | |
minute | 'numeric' | '2-digit' | |
second | 'numeric' | '2-digit' | |
date-style | 'full' | 'long' | 'medium' | 'short' | |
time-style | 'full' | 'long' | 'medium' | 'short' | |
time-zone-name | 'long' | 'short' | |
time-zone | string |