hustcc/timeago.jsPublic

NotificationsYou must be signed in to change notification settings
Fork408
Star5.4k

🕗 ⌛ timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement.

License

MIT license

5.4k stars 408 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 338 Commits
.github		.github
__tests__		__tests__
gh-pages		gh-pages
src		src
.commitlintrc.js		.commitlintrc.js
.eslintrc		.eslintrc
.gitignore		.gitignore
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
package.json		package.json
rollup.config.js		rollup.config.js
tsconfig.ci.json		tsconfig.ci.json
tsconfig.json		tsconfig.json

Repository files navigation

timeago.js

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

i18n supported.
Timeago and timein supported.
Real-time render supported.
Node and browser supported.
Well tested.

Official website. React version here:timeago-react. Python version here:timeago.

Such as

just now12 seconds ago2 hours ago3 days ago3 weeks ago2 years agoin 12 secondsin 3 minutesin 24 daysin 6 months

Usage

install

npm install timeago.js

import

import{format,render,cancel,register}from'timeago.js';

or import withscript tag in html file and access global variabletimeago.

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

example

// format the time with localeformat('2016-06-12','en_US');

CDN

Alternatively to NPM, you can also use a CDN which will reflect the latest version as soon as it is published to npm.

<scriptsrc="//unpkg.com/timeago.js"></script>

API

There only 4 API below.

format

format(date[, locale = 'en_US', opts]), format a Date instance / timestamp / date string to string.

import{format}from'timeago.js';// format timestampformat(1544666010224);// format date instanceformat(newDate(1544666010224));// format date stringformat('2018-12-12');// format with localeformat(1544666010224,'zh_CN');// format with locale and relative dateformat(1544666010224,'zh_CN',{relativeDate:'2018-11-11'});// e.g.format(Date.now()-11*1000*60*60);// returns '11 hours ago'

The default locale isen_US, and the library containsen_US andzh_CN build-in.

render &cancel

render(dom[, locale = 'en_US', opts])
cancel([dom])

Make a dom withdatetime attribute automatic rendering and cancel.

HTML code:

<divclass="timeago"datetime="2016-06-30 09:20:00"></div>

Javascript code:

import{render,cancel}from'timeago.js';constnodes=document.querySelectorAll('.timeago');// use render method to render nodes in real timerender(nodes,'zh_CN');// render with opts// render(nodes, 'en_US', { minInterval: 3 });// cancel all real-time render taskcancel();// or cancel for the specific onecancel(nodes[0])

The 3rd parameteropts contains:

exporttypeOpts={/** the relative date */readonlyrelativeDate?:TDate;/** the realtime min update interval */readonlyminInterval?:number;};

The DOM object should have the attributedatetime with date formatted string.

register

register(locale, localeFunc), register a new locale, build-in locale contains:en_US,zh_CN,all locales here.

You can register your own language withregister API.

constlocaleFunc=(number:number,index:number,totalSec:number):[string,string]=>{// number: the timeago / timein number;// index: the index of array below;// totalSec: 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 timeagoregister('my-locale',localeFunc);// use itformat('2016-06-12','my-locale');

Contributions

The website is based onrmm5t/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 ? seelocales translation.
Pleasetest the locale by execnpm test. How to write test cases, seelocales test cases.