better-time-element
v2.0.0
Published
Useful <time> element extensions
Downloads
707
Maintainers
chemerisukReadme
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-domThen 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+