New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

better-time-element

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

better-time-element

Useful <time> element extensions

  • 2.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

better-time-element
NPM version NPM downloads Build Status Coverage Status

Useful <time> element extensions using better-dom

LIVE DEMO

Features

  • represents time in localized format via custom element <local-time>
  • live extension - works for current and future content
  • custom formats supported via data-format

Installing

$ npm install better-dateinput-polyfill better-dom

Then append the following tags on your page:

<script src="node_modules/better-dom/dist/better-dom.js"></script>
<script src="node_modules/better-time-element/dist/better-time-element.js"></script>

Change display date presentation

Version 2 uses Intl methods to format presented date value according to the current page locale. You can customize it by specifying data-format attribute with options for the Date#toLocaleString call as a stringified JSON object:

<local-time datetime="2013-11-08T21:12:52.000Z" data-format='{"month":"short","year":"numeric","day":"numeric"}'></local-time>

When you set the same presentation format multiple times it makes sense to define a global format. Add extra <meta> element with appropriate values for name and content attributes into document <head>. Later in HTML you can just use a global format name as a value for data-format:

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <meta name="data-format:timeOnly" content='{"hour":"numeric","minute":"numeric","second":"numeric"}'>
</head>
<body>
    ...
    <local-time datetime="2013-11-08T21:12:52.000Z" data-format="timeOnly"></local-time>
</body>
</html>

Browser support

Desktop
  • Chrome
  • Safari
  • Firefox
  • Opera
  • Edge
  • Internet Explorer 10+
Mobile
  • iOS Safari 7+
  • Chrome for Android 30+

Keywords

FAQs

Package last updated on 01 Dec 2018

Did you know?

Socket

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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc