relative is an angular directive which parses its element's
datetime attribute and replaces the contents with a
time relative to now, e.g., "1 day ago" instead of a fixed date or
"in 87 years" instead of "2100".
It also sets the element's
title attribute to a nicely formatted
time localized to the browser's timezone so people can hover to get
the original datetime.
To learn about other options see below.
If you've understood programming you can also:
npm install ng-time-relative
<script src="ng-time-relative.js"></script> <script> // Add timeRelative as dependency to your module definition var app = angular.module('YourApp', ['timeRelative']); </script>
timeRelative to your module's dependencies to the
The module is also exposed as a CommonJS module and its dependencies can be manually injected.
This library depends on the excellent
Moment.js ~2.0.0 for date
parsing and formatting.
moment can be provided as a constant
var app = angular.module('app', ); app.constant('moment', moment); ngTimeRelative(app);
This internally more or less does
DOM output Examples
Party like it's <time relative>1999</time> -> Party like it's 14 years ago <time class="relative" without-suffix>April 5, 2063</time> until warp speed -> 50 years until warp speed The UNIX Epoch started <time relative datetime="1970-01-01"></time> -> The UNIX Epoch started 43 years ago Torment: Tides of Numenera was funded <time class="relative" datetime="2013-04-06T00:00:00Z">a while ago</time> -> Torment: Tides of Numenera was funded 2 days ago
Restrictions: (AC) The directive can be used as a class or attribute.
Input: Date is parsed from the element's text content or
dateto calculate time difference. Ignores element text-content.
theninstead of now to calculate time difference. Defaults to current time.
without-suffix: Don't display a suffix, e.g., "15 years" instead of "15 years ago" or "in 15 years".
Every directive instance sets up a timeout. The timeouts are however set up in a way that they fire only when it makes sense, as in, they fire when the text rendered by Moment.js would actually change, not before and not after.