@patternfly/pfe-datetime v1.12.3

PatternFly Elements Datetime

This element 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.

Read more about Datetime in the PatternFly Elements Datetime documentation

Installation

Load <pfe-datetime> via CDN:

<script src="https://unpkg.com/@patternfly/pfe-datetime?module"></script>

Or, if you are using NPM, install it

npm install @patternfly/pfe-datetime

Then once installed, import it to your application:

import '@patternfly/pfe-datetime';

Usage

Just the date: January 2, 2006

<pfe-datetime
  datetime="Mon Jan 2 15:04:05 EST 2006"
  format="local"
  day="numeric"
  month="long"
  year="numeric">
  Mon Jan 2 15:04:05 EST 2006
</pfe-datetime>

With time: Monday, Jan 02, 2006, 3:04:05 PM

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

With an en-GB locale: Monday, 02 Jan 2006, 15:04:05

You can use any locale here.

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

Time adverbial: 13 years ago

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