GithubHelp home page GithubHelp logo

jaggedsoft / timeago.js Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hustcc/timeago.js

0.0 1.0 0.0 124 KB

:clock8: :hourglass: timeago.js is a tiny(~1.75kb) library used to format date with `*** time ago` statement. eg: '3 hours ago'. No dependency & localization & tiny.

Home Page: http://timeago.org

License: MIT License

JavaScript 87.11% HTML 12.89%

timeago.js's Introduction

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

1. 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')

2. 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_rendered'), '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.

3. Contributions

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

  2. locale translations: The library need the locale translations. You can:

  • Open an issue to write the locale translations, how to ? see here.
  • Or pull a request, please test it before by exec npm test or node tests/locales_test.js.

4. LICENSE

MIT

timeago.js's People

Contributors

likerrr avatar shaneog avatar nucreativa avatar gautamkrishnar avatar kazzkiq avatar creativesparkstudios avatar haroenv avatar monterolebronhg avatar ilyankou avatar jcubic avatar janek26 avatar lauhakari avatar nicojuicy avatar gowza avatar sethmichaellarson avatar vkarampinis avatar kukac7 avatar paulcmal avatar pixcai avatar

Watchers

jagged 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.