Better-time-element NPM

better-time-element

Useful <time> element extensions using better-dom

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>