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

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

<pfe-datetime
  datetime="Mon Jan 2 15:04:05 EST 2006"
  type="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>

You can use any locale here.

<pfe-datetime
  datetime="Mon Jan 2 15:04:05 EST 2006"
  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 2 15:04:05 EST 2006
</pfe-datetime>

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

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

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.

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)

Possible values: narrow, short, long

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

Possible values: numeric, 2-digit

Possible values: numeric, 2-digit

Possible values: numeric, 2-digit

Possible values: numeric, 2-digit

Possible values: numeric, 2-digit

npm run test

npm run build

From the PFElements root directory, run:

npm start

Datetime (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.