timeago.js is a very concise, lightweight and less than 2kb Javascript library, which is used to convert datetime time into a description string similar to * * * time ago, for example: "3 hours ago".

• Localization support, with Chinese and English languages by default, which is basically enough;
• Before xxx time and after xxx time;
• Support automatic real-time update;
• Support npm mode and browser script mode;
• Perfect test cases and good execution;

Project official website address. For the react version, see timeago react. For the Python version, see timeago

just

12 seconds ago

Three minutes ago

2 hours ago

4 days ago

3 weeks ago

Before June

Three years ago

After 12 seconds

After 3 minutes

After 2 hours

24 days later

After 6 months

Three years later

usage method

1. Download timeago js

npm install timeago.js

2. Introduce timeago js

Use import to import, and then you can get a global variable: timeago

import timeago from 'timeago.js';
// perhaps
var timeago = require("timeago.js");

Or it can be directly imported into the html file through the script tag

<script src="dist/timeago.min.js"></script>

3. Use timeago class

var timeago = new timeago();
timeago.format('2016-06-12')

Advanced feature usage

1. Localization

The default language is English en. The native languages of this library are en and zh_CN (English and Chinese)

var timeagoInstance = new timeago();
timeagoInstance.format('2016-06-12', 'zh_CN');

You can pass in the default language in the constructor or call the setLocale method.

var timeagoInstance = new timeago('zh_CN');
// or
new timeago().setLocale('zh_CN');

1. Set relative date

timeago is relative to the current event by default. Of course, you can set the relative time yourself, as shown below:

var timeagoInstance = new timeago(null, '2016-06-10 12:12:12');
// Set the relative time here
timeagoInstance.format('2016-06-12', 'zh_CN');

2. Format timestamp, string

new timeago().format(
    new Date().getTime() - 11 * 1000 * 60 * 60
); 
// will get '11 hours ago'

3. Automatic real-time rendering

HTML is:

<div class="need_to_be_rendered" data-timeago="2016-06-30 09:20:00"></div>

Js code is:

var timeagoInstance = new timeago();
timeagoInstance.render(
    document.querySelectorAll('.need_to_be_rendered'), 'zh_CN');
// or
timeagoInstance.cancel()

The API method render can pass in a DOM node or data to indicate that these nodes need to be rendered in real time.

After the API method cancel is called, all timer methods will be cleared and all timer resources will be released.

The rendered node must have a datetime or data timeago attribute, and the attribute value is a string in date format.

5. Register local language

You can customize register your own language As shown below, all key values must exist, otherwise an error may occur e.g.

// Localized dictionary style var test_local_dict = function(number, index) {
  // Number: the number before / after XXX time;
  // Index: the index number of the following array;
  return [
    ['just now', 'a while'],
    ['%s seconds ago', 'in %s seconds'],
    ['1 minute ago', 'in 1 minute'],
    ['%s minutes ago', 'in %s minutes'],
    ['1 hour ago', 'in 1 hour'],
    ['%s hours ago', 'in %s hours'],
    ['1 day ago', 'in 1 day'],
    ['%s days ago', 'in %s days'],
    ['1 week ago', 'in 1 week'],
    ['%s weeks ago', 'in %s weeks'],
    ['1 month ago', 'in 1 month'],
    ['%s months ago', 'in %s months'],
    ['1 year ago', 'in 1 year'],
    ['%s years ago', 'in %s years']
  ][index];
};
timeago.register('test_local', test_local_dict);
var timeagoInstance = new timeago();
timeagoInstance.format('2016-06-12', 'test_local');

Welcome to initiate PR to add some real locale languages. Of course, please note that add the corresponding test cases in the tests/locales directory.