Formats the contents of HTML <time>
elements based on the contents of their data-timewarp-format
attribute.
Let's say you have a date / time in a <time>
element and it looks something like
<time datetime="2016-05-19">2016-05-19</time>
which is perfectly servicable (until perhaps you start adding the time as well: 2016-05-19T15:07:01Z+01:00
) and people will know what you mean but you just fancy making it a little... nicer. You would change the HTML but you know the date comes from a database or file and you can't just change the format it comes back in or duplicate the value while transforming it (you still need the proper datetime
format for the datetime attribute after all) because of... reasons.
Simply add an attribute data-timewarp-format
to the element and include Moment.js
in the head
. Stick timewarp.js
just before the closing </body>
tag and the job's a good 'un.
<time datetime="2016-05-19" data-timewarp-format="MMM YYYY">May 2016</time>
Formatting just as you would format the date using moment.js.
If you want to use relative time (to now), just use 'R'
You could just download one of the files in the dist
folder, or if you like to keep track of version numbers etc then...
Bower: bower install timewarp
Contributions welcome! Please add tests :)
gulp test
gulp build
(will also run tests on built code)
My thanks of course go to Moment.js since it deals with all the hard and complicated parts of this project.