better-time-element

Useful <time> element extensions

Usage no npm install needed!

<script type="module">
  import betterTimeElement from 'https://cdn.skypack.dev/better-time-element';
</script>

README

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+