Datetime

Overview

Datetime enables developers to get a lot of the features from the Intl Object just by using attributes to set the format of the date and time they'd like to display.

Current date:
With a Spanish language code of es:
Time adverbial:

Installation

npm install @patternfly/pfe-datetime

Usage

Just the date

Mon Jan 1 15:04:05 EST 2021

<pfe-datetime
  datetime="Mon Jan 1 15:04:05 EST 2021"
  type="local"
  day="numeric"
  month="long"
  year="numeric">
  Mon Jan 1 15:04:05 EST 2021
</pfe-datetime>

With time

Mon Jan 1 15:04:05 EST 2021

<pfe-datetime
  datetime="Mon Jan 1 15:04:05 EST 2021"
  type="local"
  weekday="long"
  month="short"
  day="2-digit"
  year="numeric"
  hour="2-digit"
  minute="2-digit"
  second="2-digit">
  Mon Jan 1 15:04:05 EST 2021
</pfe-datetime>

With an en-GB locale

Mon Jan 1 15:04:05 EST 2021

<pfe-datetime
  datetime="Mon Jan 1 15:04:05 EST 2021"
  type="local"
  weekday="long"
  month="short"
  day="2-digit"
  year="numeric"
  hour="2-digit"
  minute="2-digit"
  second="2-digit"
  locale="en-GB">
  Mon Jan 1 15:04:05 EST 2021
</pfe-datetime>

As UTC

2021-10-20T00:00:00.000Z

<pfe-datetime
  datetime="2021-10-20T00:00:00.000Z"
  type="local"
  weekday="long"
  month="short"
  day="2-digit"
  year="numeric"
  hour="2-digit"
  minute="2-digit"
  second="2-digit"
  time-zone="UTC">
  2021-10-20T00:00:00.000Z
</pfe-datetime>

Time adverbial

Mon Jan 2 15:04:05 EST 2010

<pfe-datetime
  type="relative"
  datetime="Mon Jan 2 15:04:05 EST 2010">
  Mon Jan 2 15:04:05 EST 2010
</pfe-datetime>

Slots

None

Attributes

datetime (observed)

The value of this should be the same timestamp that you add to the light DOM.

timestamp (observed)

A unix timestamp that will be converted for use in displaying the appropriate date. You would not use both datetime and timestamp, and the last updated will take precedence.

type (observed)

The options for type are:

• local: Shows a formatted time for the indicated locale if provided
• relative: Shows a relative time (1 hour ago, 2 hours until)

weekday

Possible values: narrow, short, long

month

Possible values: numeric, 2-digit, narrow, short, long

day

Possible values: numeric, 2-digit

year

Possible values: numeric, 2-digit

hour

Possible values: numeric, 2-digit

minute

Possible values: numeric, 2-digit

second

Possible values: numeric, 2-digit

Methods

None

Events

None

Styling hooks

None