timeago.js:将 datetime 时间转化成类似于 “*** 时间前” 的 JS 库
timeago.js 是一个非常简洁、轻量级、小于 2kb 的很简洁的Javascript库,用来将datetime时间转化成类似于*** 时间前的描述字符串,例如:“3小时前”。
JavaScript 日志处理
共4242Star
详细介绍
timeago.js
timeago.js is a simple library (less than
2 kb
) that is used to format datetime with*** time ago
statement. eg: '3 hours ago'.
- Localization supported.
- Time
ago
and timein
supported. - Real-time render supported.
- Nodejs and browserjs supported.
- Well tested.
Official website. 中文版说明文档点这里。 React version here: timeago-react. Python version here: timeago.
Such as
just now
12 seconds ago
3 minutes ago
2 hours ago
3 days ago
3 weeks ago
6 months ago
2 years ago
in 12 seconds
in 3 minutes
in 2 hours
in 24 days
in 6 months
in 2 years
1. Usage
1. Install timeago.js
npm install timeago.js
2. Import timeago.js
ES6/commonjs import style is supported.
// ES6
import timeago from 'timeago.js';
// commonjs
var timeago = require("timeago.js");
or link as a script
in an html file and access global variable timeago
.
<script src="dist/timeago.min.js"></script>
or import in a typescript file.
import timeago from 'timeago.js';
// or
import timeago = require("timeago.js");
3. Use timeago
factory to create a new instance
var timeagoInstance = timeago();
timeagoInstance.format('2016-06-12');
2. Detailed Usage
1. Set relative date
timeago
is relative to the current date by default. You can set it yourself.
var timeagoInstance = timeago('2016-06-10 12:12:12'); // set the relative date here.
timeagoInstance.format('2016-06-12', 'zh_CN');
2. Use timestamp
timeago().format(Date.now() - 11 * 1000 * 60 * 60); // returns '11 hours ago'
3. Automatic rendering
HTML code:
<div class="needs_to_be_rendered" datetime="2016-06-30 09:20:00"></div>
js code
var timeagoInstance = timeago();
var nodes = document.querySelectorAll('.needs_to_be_rendered');
// use render method to render nodes in real time
timeagoInstance.render(nodes, 'zh_CN');
// cancel real-time render for every node
timeago.cancel()
// or for the specific one
timeago.cancel(nodes[0])
The input for render
method should be DOM object/array, pure javascript DOM node or jQuery DOM object.
The cancel
method clears all the render timers and release all resources of the instance. Optionally it accepts a single node to cancel timer just for it.
The DOM object should have the attribute datetime
or data-timeago
with date formatted string.
4. Localization
Default locale is en
, and the library supports en
and zh_CN
.
var timeagoInstance = timeago();
timeagoInstance.format('2016-06-12', 'zh_CN');
You can change the locale in the constructor or use the setLocale
method:
var timeagoInstance = timeago(currentDate, 'zh_CN');
// or
timeago(currentDate).setLocale('zh_CN');
5. Register local language
You can register your own language via a static method register
. Usage example:
// the local dict example is below.
var test_local_dict = function(number, index, total_sec) {
// number: the timeago / timein number;
// index: the index of array below;
// total_sec: total seconds between date to be formatted and today's date;
return [
['just now', 'right now'],
['%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];
};
// register your locale with timeago
timeago.register('test_local', test_local_dict);
// use the locale with timeago instance
var timeagoInstance = timeago();
timeagoInstance.format('2016-06-12', 'test_local');
Check out more locales.
Locale contributions are welcomed, thank you for submitting a GitHub pull request for corrections or additional languages. ^_^~
3. Contributions
-
The website is based on rmm5t/jquery-timeago which is a nice and featured project but it depends on jQuery.
-
locale translations: The library needs more locale translations. You can:
- Open an issue to write the locale translations, or submit a pull request. How to ? see en's translation.
- Please test the locale by exec
npm test
ornode tests/locales_test.js
. How to write testcase, see en's test cases.