Timeago.js

Timeago.js 是一个用于格式化日期(类似多少分之前)的微型 (~1.75kb) 库,零依耐,支持本地化

timeago.js

timeago.js is a simple library (less then 2 kb) to used to format datetime with *** time ago statement. eg: '3 hours ago'.

  • Localization supported.
  • Time ago and time in supported.
  • Real-time render supported.
  • npm and browser supported.
  • Well tested.

Official website. 中文版说明文档点这里。 React version here: timeago-react. Python version here: timeago.

Build Status npm npm npm

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

Usage

1. Install timeago.js

npm install timeago.js

2. import timeago.js

UMD import is supported, then get global object: timeago.

import timeago from 'timeago.js';

// or

var timeago = require("timeago.js");

or link with script in html files:

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

3. Use class timeago

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

Detailed Usage

1. Set relative date

timeago is relate to current date default. you can set it by yourself.

var timeago = timeago('2016-06-10 12:12:12'); // set the relative date here.
timeago.format('2016-06-12', 'zh_CN');

2. Use timestamp

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

3. Automatic rendering

HTML code:

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

js code

// use render to render it realtime
timeago().render(document.querySelectorAll('.need_to_be_render'), 'zh_CN');
// or cancel realtime render
timeago().cancel()

The input API render should be DOM object/array, support pure Javascript, Node, and jQuery DOM object.

The API cancel will clear all the render timers and release all the resources.

The DOM object should have the attribute data-timeago with date formated string.

4. Localization

Default locale is en, and the library supports en and zh_CN.

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

You can change the locale in the constructor or use the setLocale method;

var timeago = timeago(null, 'zh_CN');
// or
timeago.setLocale('zh_CN');

5. Register local language

You can register you own language. All keys are needed. e.g.

// the local dict example is below.
var test_local_dict = function(number, index) {
  // number: the timeago / timein number;
  // index: the index of array below;
  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];
};

var timeago = timeago();
timeago.register('test_local', test_local_dict);

timeago.format('2016-06-12', 'test_local');

You can see locales dir for more locales. Please submit a GitHub pull request for corrections or additional languages, and add the locale key into tests/locales_test.js.

Contribution

The website is base on rmm5t/jquery-timeago which is a nice and featured project but depends on jQuery.

LICENSE

MIT

timeago.js

timeago.js 是一个非常简洁、轻量级、不到 2kb 的很简洁的Javascript库,用来将datetime时间转化成类似于*** 时间前的描述字符串,例如:“3小时前”。

  • 本地化支持,默认自带中文和英文语言,基本够用;
  • 之前 xxx 时间前、xxx 时间后;
  • 支持自动实时更新;
  • 支持npm方式和浏览器script方式;
  • 测试用例完善,执行良好;

Official website。关于Python的版本,可以看 timeago.

Build Status npm npm npm

刚刚
12秒前
3分钟前
2小时前
4天前
3周前
6月前
3年前

12秒后
3分钟后
2小时后
24天后
6月后
3年后

使用方法

1. 下载 timeago.js

npm install timeago.js

2. 引入 timeago.js

使用import引入,然后可以得到一个全局变量: timeago.

import timeago from 'timeago.js';

// 或者

var timeago = require("timeago.js");

或者直接通过 script 标签引入到html文件中.

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

3. 使用 timeago

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

高级特性使用

1. 设置相对日期

timeago 默认是相对于当前事件的,当然也可以自己设置相对的时间,如下所示:

var timeagoInstance = new timeago(null, '2016-06-10 12:12:12'); // 在这里设置相对时间
timeagoInstance.format('2016-06-12', 'zh_CN');

2. 格式化时间戳,字符串

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

3. 自动实时渲染

HTML为:

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

Js代码为:

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

// or

timeagoInstance.cancel()

API方法 render 可以传入一个DOM节点或者数据,标示需要实时渲染这些节点。

API方法 cancel 调用之后会清除所有的定时器方法,并且释放所有定时器资源。

被渲染的节点必须要有 datetime 或者 data-timeago 属性,属性值为日期格式的字符串。

4. 本地化

默认的语言是英文 en, 这个库自带语言有 en and zh_CN (英文和中文).

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

可以在构造函数中传入默认语言,也可以调用 setLocale 方法。

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

5. 注册本地语言

你可以自己自定义注册 register 你自己的语言. 如下所示,所有的键值都必须存在,不然可能会出错. e.g.

// 本地化的字典样式
var test_local_dict = function(number, index) {
  // number: xxx 时间前 / 后的数字;
  // index: 下面数组的索引号;
  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');

欢迎发起 PR 添加一些确实的 locale 语言,当然请注意,在 tests/locales 目录中添加对应的测试用例。

LICENSE

MIT

讨论区