PatternFly Elements - Home PatternFly Elements

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

weekday
Type
'narrow'|'short'|'long'
Default
unknown
month
Type
'numeric'|'2-digit'|'narrow'|'short'|'long'
Default
unknown
day
Type
'numeric'|'2-digit'
Default
unknown
year
Type
'numeric'|'2-digit'
Default
unknown
hour
Type
'numeric'|'2-digit'
Default
unknown
minute
Type
'numeric'|'2-digit'
Default
unknown
second
Type
'numeric'|'2-digit'
Default
unknown
time-zone-name
Type
'short'|'long'
Default
unknown
type

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)
DOM Property
type
Type
'local'|'relative'
Default
'local'
datetime

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

DOM Property
datetime
Type
string
Default
''
timestamp

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.

DOM Property
timestamp
Type
number | undefined
Default
unknown
time-zone

Time Zone

DOM Property
timeZone
Type
string | undefined
Default
unknown

DOM Properties

None

Methods

setDate(date: number|Date)

Events

None

CSS Custom Properties

None

CSS Shadow Parts

None