angular-timeago

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.

## Usage Install via Bower

bower install --save angular-timeago

Reference in module

var app = angular.module('ngApp', [
  'yaru22.angular-timeago'
]);

### Filter
####Basic Filter

{{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.

###Language support angular-timeago currently supports the following languages:
en_US, de_DE, he_IL, pt_BR, it_IT, fr_FR, es_LA, nl_NL and ca_ES. If you want more languages: feel free to contribute! The language is determined by the string in document.documentElement.lang which you can set in your HTML markup:

<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.

Testing

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):

mkolodny/angular-timeago

angular-timeago

Testing