PFElements Datetime Element

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.

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>

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.

format (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