Code Monkey home page Code Monkey logo

timeago.js's Introduction

timeago.js

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

  • Localization supported.
  • Time ago and time in supported.
  • Real-time render supported.
  • Nodejs and browserjs supported.
  • Well tested.

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

Build Status Coverage Status gzip 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

  • Install
npm install timeago.js
  • Import
// ES6
import { format, render, cancel, register } from 'timeago.js';

// commonjs
const { format, render, cancel, register } = require('timeago.js');

or import with script in html file and access global variable timeago.

<script src="dist/timeago.min.js"></script>
  • Usage
// format the time with locale
format('2016-06-12', 'en_US');

API

There only 4 API:

  • format(date[, locale = 'en_US', relativeDate = new Date()]): format a Date instance / timestamp / date string to string.
  • render(dom[, locale = 'en_US', relativeDate = new Date()]): make a dom automatic rendering.
  • cancel([dom]): cancel automatic rendering.
  • register(locale, localeFunc): register a new locale, build-in locale contains: en_US, zh_CN.

Case

  • format

Just format date into a string.

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

// format timestamp
format(1544666010224);
// format date instance
format(new Date(1544666010224));
// format date string
format('2018-12-12');

// format with locale
format(1544666010224, 'zh_CN');

// format with locale and relative date
format(1544666010224, 'zh_CN', '2018-11-11');

// e.g.
format(Date.now() - 11 * 1000 * 60 * 60); // returns '11 hours ago'
  • render & cancel

You can render a dom node with automatic rendering.

HTML code:

<div class="needs_to_be_rendered" datetime="2016-06-30 09:20:00"></div>

Javascript code:

var nodes = document.querySelectorAll('.needs_to_be_rendered');

// use render method to render nodes in real time
timeago.render(nodes, 'zh_CN');

// cancel all real-time render task
timeago.cancel();

// or cancel 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 supported.

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 with date formatted string.

  • register

Default locale is en_US, and the library supports en_US and zh_CN. You can register your own language with register.

// the local dict example is below.
const localeFunc = (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
register('my-locale', localeFunc);

// use it
format('2016-06-12', 'my-locale');

Check out more locales.

Contributions

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

  2. 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 locales translation.
  • Please test the locale by exec npm test. How to write testcase, see locales test cases.

LICENSE

MIT@https://github.com/hustcc

timeago.js's People

Contributors

ajphukan avatar alaatm avatar boyum avatar breakfastcerealkillr avatar finwo avatar fiznool avatar gautamkrishnar avatar gowza avatar greg-dev avatar hustcc avatar ivantedja avatar kukac7 avatar lauhakari avatar likerrr avatar niklasf avatar nucreativa avatar olehreznichenko avatar riley-stroud-ck avatar roiexlab avatar sethmichaellarson avatar shaneog avatar sky93 avatar sufuf3 avatar tnir avatar tomision avatar tomonari-t avatar ttasanen avatar vkarampinis avatar vladshcherbin avatar yarobadtrak avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.