Angular directive/filter/service for formatting date so that it displays how long ago the given time was compared to now.
## Disclaimer This project is based off of a thread on Angular Google Groups. The person who started the thread, @lrlopez, gave me permission to start a repo using the code he wrote initially. Thanks to @lrlopez and other contributors in the thread.
## Demo Check out the demo here.
bower install --save angular-timeago
Reference in module
var app = angular.module('ngApp', [
'yaru22.angular-timeago'
]);
{{myDate | timeAgo}}
Displays time ago since myDate. myDate can be time in milliseconds since January 1st 1970 (see MDN Date.prototype.getTime) or an ISO 8601 string (see MDN Date.prototype.toISOString)
####Filter using Angular date format
{{myDate | timeAgo:'MM/dd/yyyy'}}
The format filter will only take effect if you've configured the service to display the full date after a certain number of seconds using the fullDateAfterSeconds setting. In this scenario, it will use the Angular date filter with this format string.
###Directive ####Basic Directive
<p>You were born <time-ago from-time='{{ birthDate }}'></time-ago></p>####Directive using Angular date format
<p>You were born <time-ago from-time='{{ birthDate }}' format='MM/dd/yyyy'></time-ago></p>###Configuration Settings timeAgo has several configurable settings to tweak the default behavior.
angular.controller('appCtrl', function (timeAgo) {
timeAgo.settings.<setting> = <value>;
});####allowFuture
Default: false
timeAgo.settings.allowFuture = true;This will allow timeAgo to format dates in the future as well. e.g. "2 hours from now"
####overrideLang
Default: null
<html lang='en_US'>
...// even though the page's setting is 'en_US', timeAgo filtered
// dates will render in 'es_LA'
timeAgo.settings.overrideLang = 'es_LA';See Language Support for languages this library supports.
####fullDateAfterSeconds
Default: null
// After 24 hours, display the date normally.
var oneDay = 60*60*24;
timeAgo.settings.fullDateAfterSeconds = oneDay;This configures timeAgo to use it's own filters (about a minute ago, about 4 hours ago, etc) until fullDateAfterSeconds seconds have passed, and then it will display the date as normal. This is useful when combined with a date format filter.
<html lang="en_US"></html>
Or directly in JS:
window.document.documentElement.lang = 'en_US';
Or configure the service to override the default language:
app.controller('appCtrl', function (timeAgo) {
timeAgo.settings.overrideLanguage = 'es_LA';
});You can also add additional or alter existing languages at runtime by extending the service:
app.controller('appCtrl', function (timeAgo) {
timeAgo.settings.strings.en_US = {
// appropriate keys here
};
});For more details refer to the source code.
In order to run the e2e tests you might need to install a Selenium server via:
./node_modules/grunt-protractor-runner/scripts/webdriver-manager-update```
And then use grunt to run all tests (unit and e2e):