Socket
Socket
Sign inDemoInstall

@patternfly/pfe-datetime

Package Overview
Dependencies
1
Maintainers
16
Versions
67
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @patternfly/pfe-datetime

Datetime element for PFElements


Version published
Maintainers
16
Install size
514 kB
Created

Readme

Source

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

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

Test

npm run test

Build

npm run build

Demo

From the PFElements root directory, run:

npm start

Code style

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.

FAQs

Last updated on 01 Feb 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc