1 | # timeago.js
|
2 |
|
3 | > **timeago.js** is a nano library(less than `2 kb`) used to format datetime with `*** time ago` statement. eg: '3 hours ago'.
|
4 |
|
5 | - i18n supported.
|
6 | - Time `ago` and time `in` supported.
|
7 | - Real-time render supported.
|
8 | - Node and browser supported.
|
9 | - Well tested.
|
10 |
|
11 | [Official website](https://timeago.org/). React version here: [timeago-react](https://github.com/hustcc/timeago-react). Python version here: [timeago](https://github.com/hustcc/timeago).
|
12 |
|
13 | [![npm Version](https://img.shields.io/npm/v/timeago.js.svg)](https://www.npmjs.com/package/timeago.js)
|
14 | [![unpkg](https://img.shields.io/npm/v/timeago.js?label=cdn)](https://unpkg.com/browse/timeago.js/)
|
15 | [![Build Status](https://github.com/hustcc/timeago.js/workflows/build/badge.svg)](https://github.com/hustcc/timeago.js/actions)
|
16 | [![Coverage Status](https://coveralls.io/repos/github/hustcc/timeago.js/badge.svg?branch=master)](https://coveralls.io/github/hustcc/timeago.js?branch=master)
|
17 | [![Dist gzip](https://img.badgesize.io/https://unpkg.com/timeago.js/dist/timeago.min.js?compression=gzip)](https://unpkg.com/timeago.js/dist/timeago.min.js)
|
18 | [![npm Download](https://img.shields.io/npm/dm/timeago.js.svg)](https://www.npmjs.com/package/timeago.js)
|
19 | [![npm License](https://img.shields.io/npm/l/timeago.js.svg)](https://www.npmjs.com/package/timeago.js)
|
20 |
|
21 |
|
22 | Such as
|
23 |
|
24 | ```plain
|
25 | just now
|
26 | 12 seconds ago
|
27 | 2 hours ago
|
28 | 3 days ago
|
29 | 3 weeks ago
|
30 | 2 years ago
|
31 |
|
32 | in 12 seconds
|
33 | in 3 minutes
|
34 | in 24 days
|
35 | in 6 months
|
36 | ```
|
37 |
|
38 |
|
39 | ## Usage
|
40 |
|
41 | - install
|
42 |
|
43 | ```bash
|
44 | npm install timeago.js
|
45 | ```
|
46 |
|
47 | - import
|
48 |
|
49 | ```ts
|
50 | import { format, render, cancel, register } from 'timeago.js';
|
51 | ```
|
52 |
|
53 | or import with `script` tag in html file and access global variable `timeago`.
|
54 |
|
55 | ```html
|
56 | <script src="dist/timeago.min.js"></script>
|
57 | ```
|
58 |
|
59 | - example
|
60 |
|
61 | ```ts
|
62 | // format the time with locale
|
63 | format('2016-06-12', 'en_US');
|
64 | ```
|
65 |
|
66 |
|
67 | ## API
|
68 |
|
69 | There only 4 API below.
|
70 |
|
71 | - **format**
|
72 |
|
73 | > `format(date[, locale = 'en_US', opts])`, format a Date instance / timestamp / date string to string.
|
74 |
|
75 | ```ts
|
76 | import { format } from 'timeago.js';
|
77 |
|
78 | // format timestamp
|
79 | format(1544666010224);
|
80 |
|
81 | // format date instance
|
82 | format(new Date(1544666010224));
|
83 |
|
84 | // format date string
|
85 | format('2018-12-12');
|
86 |
|
87 | // format with locale
|
88 | format(1544666010224, 'zh_CN');
|
89 |
|
90 | // format with locale and relative date
|
91 | format(1544666010224, 'zh_CN', { relativeDate: '2018-11-11' });
|
92 |
|
93 | // e.g.
|
94 | format(Date.now() - 11 * 1000 * 60 * 60); // returns '11 hours ago'
|
95 | ```
|
96 |
|
97 | The default locale is `en_US`, and the library contains `en_US` and `zh_CN` build-in.
|
98 |
|
99 | - **render** & **cancel**
|
100 |
|
101 | > `render(dom[, locale = 'en_US', opts])`
|
102 | > `cancel([dom])`
|
103 |
|
104 | > Make a dom with `datetime` attribute automatic rendering and cancel.
|
105 |
|
106 | HTML code:
|
107 |
|
108 | ```html
|
109 | <div class="timeago" datetime="2016-06-30 09:20:00"></div>
|
110 | ```
|
111 |
|
112 | Javascript code:
|
113 |
|
114 | ```ts
|
115 | import { render, cancel } from 'timeago.js';
|
116 |
|
117 | const nodes = document.querySelectorAll('.timeago');
|
118 |
|
119 | // use render method to render nodes in real time
|
120 | render(nodes, 'zh_CN');
|
121 |
|
122 | // render with opts
|
123 | // render(nodes, 'en_US', { minInterval: 3 });
|
124 |
|
125 | // cancel all real-time render task
|
126 | cancel();
|
127 |
|
128 | // or cancel for the specific one
|
129 | cancel(nodes[0])
|
130 | ```
|
131 |
|
132 | The 3rd parameter `opts` contains:
|
133 |
|
134 | ```ts
|
135 | export type Opts = {
|
136 | /** the relative date */
|
137 | readonly relativeDate?: TDate;
|
138 | /** the realtime min update interval */
|
139 | readonly minInterval?: number;
|
140 | };
|
141 | ```
|
142 |
|
143 | > The DOM object should have the attribute `datetime` with date formatted string.
|
144 |
|
145 | - **register**
|
146 |
|
147 | > `register(locale, localeFunc)`, register a new locale, build-in locale contains: `en_US`, `zh_CN`, [all locales here](src/lang).
|
148 |
|
149 | You can register your own language with `register` API.
|
150 |
|
151 | ```ts
|
152 | const localeFunc = (number: number, index: number, totalSec: number): [string, string] => {
|
153 | // number: the timeago / timein number;
|
154 | // index: the index of array below;
|
155 | // totalSec: total seconds between date to be formatted and today's date;
|
156 | return [
|
157 | ['just now', 'right now'],
|
158 | ['%s seconds ago', 'in %s seconds'],
|
159 | ['1 minute ago', 'in 1 minute'],
|
160 | ['%s minutes ago', 'in %s minutes'],
|
161 | ['1 hour ago', 'in 1 hour'],
|
162 | ['%s hours ago', 'in %s hours'],
|
163 | ['1 day ago', 'in 1 day'],
|
164 | ['%s days ago', 'in %s days'],
|
165 | ['1 week ago', 'in 1 week'],
|
166 | ['%s weeks ago', 'in %s weeks'],
|
167 | ['1 month ago', 'in 1 month'],
|
168 | ['%s months ago', 'in %s months'],
|
169 | ['1 year ago', 'in 1 year'],
|
170 | ['%s years ago', 'in %s years']
|
171 | ][index];
|
172 | };
|
173 | // register your locale with timeago
|
174 | register('my-locale', localeFunc);
|
175 |
|
176 | // use it
|
177 | format('2016-06-12', 'my-locale');
|
178 | ```
|
179 |
|
180 |
|
181 | ## Contributions
|
182 |
|
183 | 1. The website is based on [rmm5t/jquery-timeago](https://github.com/rmm5t/jquery-timeago) which is a nice and featured project but it depends on jQuery.
|
184 | 2. **locale translations**: The library needs more locale translations. You can:
|
185 |
|
186 | - Open an issue to write the locale translations, or submit a pull request. How to ? see [locales translation](src/lang/).
|
187 | - Please **test** the locale by exec `npm test`. How to write test cases, see [locales test cases](__tests__/lang/).
|
188 |
|
189 |
|
190 | ## LICENSE
|
191 |
|
192 | MIT@[hustcc](https://github.com/hustcc)
|