lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Format Datetime

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

2023-07-28T04:20:17.434Z
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

2023-07-28T04:20:17.434Z2023-07-28T04:20:17.434Z
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 text2023-07-28T04:20:17.434Ztest some text

code
<script type="module">
  import '@blueprintui/components/include/format-datetime.js';
</script>

<p bp-text="body">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

NameTypesDescription
localestring
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'
timeZonestring

Attributes

NameTypesDescription
localestring
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-zonestring