Utility for formatting and updating dates



Date will be set using the string in the datetime attribute and rendered as an absolute date as it was over a year ago.

<time data-o-component="o-date" class="o-date" datetime="2000-06-14T23:00:00.000Z">June 15, 2000</time> (dates far in the past are formatted as exact dates)
<time data-o-component="o-date" class="o-date"></time> (more recent dates are formatted as relative times)
<time data-o-component="o-date" class="o-date" data-o-date-format="today-or-yesterday-or-nothing"></time> (Using the o-date-format option)
<time data-o-component="o-date" class="o-date" data-o-date-format="time-ago-limit-4-hours"></time> (Using the o-date-format with time-ago-limit-4-hours)
<time data-o-component="o-date" class="o-date" data-o-date-format="h:mm a"></time> (Using the o-date-format with custom format string)


We're setting the datetime attribute on both date elements imperatively and these are then rendered as relative dates

<time data-o-component="o-date" class="o-date"></time><br>
<time data-o-component="o-date" class="o-date"></time><br>
<time data-o-component="o-date" data-o-date-format="today-or-yesterday-or-nothing" class="o-date"></time><br>
GitHub Repository


Build Service

Add the following to your <script> tag


How do I do that?

For more information see the Origami build service.

Manual Build Process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-date"@"^2.8.0"

For more information see the Origami build process.