Smart Time Ago is a little jQuery library to update the relative timestamps in your document.

Overview

Smart Time Ago

Smart Time Ago is a little jQuery library to update the relative timestamps in your document intelligently. (e.g "3 hours ago").

It's originally built for https://fengche.co/ (Originally Pragmatic.ly).

It's inspired by another jQuery plugin http://timeago.yarp.com/ but give more flexibility and more intelligently.

Installation

You can use it as a jQuery plugin.

Just copy the lib/timeago.js or src/timeago.coffee to your project folder then load it after jQuery.

Or if you use node, you can install it from npm.

$ npm install -g smart-time-ago

Why Smart?

Smart Time Ago will check and update the relative time every 60000 millisecond (60 seconds) in the scope you specify at the beginning. Latter it will check the newest time in your scope then tune the checking time interval to a proper value.

For example, if the newest time in the scope you specify is '2 hours ago'. There is no need to check and update the relative time every 60 seconds. Instead, Smart Time Ago will automaticly make the checking time interval longer to 30 minutes.

Rules:

The newest time is less than 44 minutes, the checking time interval will set to 1 minute.

The newest time is between 44 and 89 minutes, the checking time interval will set to 22 minutes.

The newest time is between 90 minutes and 42 hours, the checking time interval will set to 30 minutes.

The newest time is more than 42 hours, the checking time interval will set to half day.

Usage

By default Smart Time Ago will keep watching on the time elements with a class of timeago and a ISO8601 timestamp in datatime attribute:

<time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>

You can initialize the smart-time-ago in global like:

$('body').timeago();

It will watch all your relative time elements by only one TimeAgo instance.

Or you can use it in a specify scope like.

<div class="timeLables">
 <time class="timeago" datetime="2012-07-18T07:51:50Z">about 8 hours ago</time>
 <time class="timeago" datetime="2012-07-18T06:51:50Z">about 9 hours ago</time>
</div>

$('.timeLables').timeago();

It will create one TimeAgo instance to update the time elements in the div with timeLables class.

However you can also create TimeAgo instance for every time element separately like:

$('.timeago').timeago();

BTW if you need dynamic add the time element to your document without refreshing the page or you want to refresh the timeago manually. You might need call the refresh function to refresh the instance like:

$('.timeago').timeago('refresh');

Configuration

There are some default configuration in Smart Time Ago:

$.fn.timeago.defaults = {
  selector: 'time.timeago',
  attr: 'datetime',
  dir: 'up',
  suffix: 'ago'
};

The 'time.timeago' is the default selector to watch and update.

The 'datetime' is the default attribute to put the ISO8601 absolute time to parse.

The 'up' in dir means the elements in your scope is display by time desc. which means if the dir sets to 'up'. Smart Time Ago will treat the first element's time as the newest time to adjust the time interval. Oppositely if it set to 'down', Smart Time Ago will treat the last element's time as the newewst time.

The 'ago' in 'suffix' means the relative generated by Smart Time Ago will look like '3 hours ago'. If you want the text looks like '3 hours from now', you might need change the 'suffix' to 'from now'.

You can change the default configurations by passing the options to timeago function when initialize timeago like:

$('.timeago').timeago({selector: 'span.timeago', attr: 'title', dir: 'down', suffix: 'from now'})

Gem for Rails

Thanks ashchan for writing the ruby gem: timeago-rails

If you wanna running Smart Time Ago in Rails, please do check it out.

TODO

Thanks very much if you could contribute.

Credits

风车协作

Smart Time Ago is maintained and funded by Fengche.co.

Thanks to all the contributors.

Special thanks to unRob for the i18n support.

Copyright (c) 2012 Terry Tai, Fengche.co ([email protected], https://fengche.co/)

Comments
  • smarter and improved

    smarter and improved

    I've added several new options to this library. All of them include tests and there is documentation in the readme for them.

    $.fn.timeago.defaults = {
      // The default attribute to put the ISO8601 absolute time to parse.
      attr: 'datetime',
    
      // An extra space character will be added between the time and the unit.
      // '1 minute' will look like '1minute' with spacing set to `false`.
      spacing: true,
    
      // Will enable displaying text approximation words
      // such as 'about 1 hour' and 'almost 2 years'.
      approximate: true,
    
      // The text generated by Smart Time Ago will look like '3 hours ago'.
      // If you want the text looks like '3 hours from now',
      // you might need change the 'suffix' to ' from now'.
      suffix: ' ago',
    
      // Will show how many seconds. Instead of 'less than a minute ago' you'll see '24 seconds ago'.
      showSeconds: false,
    
      // You can specify how many seconds, below 59, to show a 'just now' message
      // instead of '1 second ago'.
      showNow: false,
    
      // After a date's relative time is too big,
      // you might want to display its absolute version.
      // For example, if after one month you don't want to display '2 years ago',
      // you can make `maxRelative` equal `2592000` which is a month in seconds.
      // Then specify an absolute displaying date function.
      maxRelative: false,
      absoluteDate: function(date, datetime) { return datetime; }
    };
    

    If you notice, I also removed the dir and selector options, because those are not needed. jQuery already has a selector engine, and it's already possible to call timeago on dynamically added elements. It makes much more sense for the user to be able to select what elements to use with time ago like this

    $('.timeago').timeago();
    

    instead of

    $('body').timeago();
    

    Also, this way, each of the elements get their own TimeAgo instance, and therefore their own timeout. I didn't really understand why the dir option was needed, it would mean that every single date for that instance would be updated even unnecessarily, which I think goes in the wrong direction if we want this to be smart.

    Also, I made this much smarter. The timeouts are now set to go off exactly when the relative date will change, and not before or much much after. Being more accurate with timeouts is smarter. :)

    opened by fent 23
  • Add bower support

    Add bower support

    Hey there, just saw this library and it would be great if it would have official bower support. I took the liberty of quickly creating a bower.json I don't know if you have used bower before, but you would still need to register the package and Bower uses git Tags for versioning, so it would be great if you could add that as well. Here are all the instructions: http://bower.io/ under Registering packages That would be great.

    opened by Globegitter 5
  • timeago.da.coffee

    timeago.da.coffee

    Danish locale file:

      $.fn.timeago.defaults.lang = {
        units: {
          second: "sekund",
          seconds: "sekunder",
          minute: "minut",
          minutes: "minutter",
          hour: "time",
          hours: "timer",
          day: "dag",
          days: "dage",
          month: "måned",
          months: "måneder",
          year: "år",
          years: "år"
        },
        prefixes: {
          lt: "mindre end",
          about: "ca.",
          over: "over",
          almost: "næsten",
          ago: ""
        },
        suffix: " siden"
      };
    
    opened by nilskp 3
  • What if not UTC?

    What if not UTC?

    I had a time stamp that was from 5 minutes ago, but the script output gave me "2 hours ago". My local time zone is UTC+2, so for me I have had to change the source code of the timeago.js file to output the correct time. Would it not be better to have this as a setting which can be overridden if required?

    opened by philipbkemp 1
  • Prefix variables missing

    Prefix variables missing

    Hello,

    What about all the other variables used in the original jquery.timego, like prefixAgo, prefixFromNow ? How con you implement that ? You should note that some languages, other than English, use different grammar/semantics when building sentences.

    thanks

    opened by pcout 1
  • Adding Japanese localization, fixing Chinese.

    Adding Japanese localization, fixing Chinese.

    Besides these, I feel we need further enhancements:

    • lt: "less than a" : if it's feed with hour, "less than a hour" is wrong. The correct one is "less than an hour".
    • Japanese locale may not be correct due to my super poor knowledge.
    opened by ashchan 0
  • milliseconds should be optional

    milliseconds should be optional

    Nice and useful plugin. However, it outputs NaN on timestamps that doesn't have three millisecond digits. This pull request will fix that.

    Thanks Jonas

    opened by jmosbech 0
  • Added basic i18n support

    Added basic i18n support

    I'm using your code for a spanish-speaking project, so here's some code to do i18n. Hope it helps.

    • Using the default options, we can add units and prefixes
    • Added a spanish set
    • Added a non-native french set that should be corrected by a native speaker
    • I'm not familiar with testing, so I added the file to watch it fail "properly" :)

    Great job, by the way!

    opened by unRob 0
  • Future time

    Future time

    The problem with this TimeAgo technology is that it doesn't support future time ... for example I wanted to add a future time for a coupon code expiration, when I use TimeAgo in this case it says about {X} time (AGO). Is there anything I can do to fix it? Thanks

    opened by hamzaelmaghari 0
  • [question] convert to full timeago

    [question] convert to full timeago "x years, y months, z days ago" not only "years/months/days" ago

    Hi, Thanks @poiyzy for this awesome jquery plugin :+1: Sorry for my bad english :(

    Is it possible to convert a datetime to full timeago like this 2015-01-25 03:37:46 to "2 months, one day, 5 hours and 10 minutes ago"

    now it only convert 2015-01-25 03:37:46 to "2 months ago"

    Thanks

    opened by flashios09 0
  • Plugin destroy

    Plugin destroy

    I'm using the plugin in a rather dynamic application with many items being added and removed from the DOM. When I add a time item I initialize it with:

    this.children('.timeago').timeago();
    

    I'm wondering however how should I go about destroying the listeners and unbinding the plugin. After a first look there's no destroy method available.

    Thanks!

    opened by titel 0
A CodeMirror (v6) extension for adding relative line numbers to your code editor

Relative Line Numbers for CM6 Installation yarn add codemirror-line-numbers-relative Usage import { EditorView } from "@codemirror/view"; import { Edi

Joe Previte 5 Feb 7, 2022
This plugin allows side-by-side notetaking with videos. Annotate your notes with timestamps to directly control the video and remember where each note comes from.

Obsidian Timestamp Notes Use Case Hello Obsidian users! Like all of you, I love using Obsidian for taking notes. My usual workflow is a video in my br

null 74 Jan 2, 2023
Another logger in JS. This one offers a console.log-like API and formatting, colored lines and timestamps (or not if desired), all that with 0 dependencies.

hellog Your new logger ! hellog is a general-purpose logging library. It offers a console.log-like API and formatting, extensible type-safety colored

Maxence Lecanu 4 Jan 5, 2022
Trusted timestamps that you can physically include in photos, videos and live streams using QR codes and audible data signals.

QR Date This is the reference implementation for the first version of QR Date, a signed timestamp inside a QR code that you can use to verify the date

QR Date 36 Oct 5, 2022
This plugin can generate timestamps for video, audio and Bilibili video, it takes you to the corresponding video/audio position when clicked.

logseq-plugin-media-ts 本插件能够生成视频、音频以及 B 站视频的时间戳,点击时间戳后会跳转到对应的音视频位置。 This plugin can generate timestamps for video, audio and Bilibili video, it takes

Seth Yuan 58 Jan 3, 2023
Ethereum Smart Contracts for locking your Ether and ERC20 tokens based on time and price conditions

SmartHold - a simple way to lock and hold your ETH or ERC20 in a smart contract This is a BETA software that has not been audited for security. USE AT

Paweł Urbanek 22 May 5, 2022
portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. ?? portfo

Gaurav Gulati 15 Aug 3, 2021
A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Clock Timepicker Plugin for jQuery See a demo here A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plu

Andy 51 Dec 22, 2022
A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance

googoose A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance Abo

Aaron Adel 32 Jan 3, 2023
Little Javascript / Typescript library for validating format of string like email, url, password...

String-Validators Little Javascript / Typescript library for validating format of string like email, url, password... Signaler un Bug · Proposer une F

J.Delauney 3 Oct 14, 2022
Want to preserve your loved one's voices for eternity? Narrate anything using the a voice imprint that can be made in as little as 10 minutes of audio samples. Easy as pie.

Want to preserve your loved one's voices for eternity? Narrate anything using the a voice imprint that can be made in as little as 10 minutes of audio samples. Easy as pie.

Ari 15 Nov 29, 2022
A little utility type package that allows you to access the current TypeScript version from your types.

@phryneas/ts-version A little utility type package that allows you to access the current TypeScript version from your types. import { TSVersion } from

Lenz Weber-Tronic 11 Sep 4, 2022
Lightweight (zero dependencies) library for enabling cross document web messaging on top of the MessageChannel API.

Lightweight (zero dependencies) library for enabling cross document web messaging on top of the MessageChannel API.

LironH 4 Jul 15, 2022
A library website that allows you to create, update and delete books.

Awesome Books A book Library. Built With HTML CSS Javascript Live Demo (if available) Live Demo Link Getting Started This is an example of how you may

Assad Isah 4 Oct 1, 2022
A vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document.

DocumentOutline.js DocumentOutline is a vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document. See a liv

Angelo Faella 3 Jul 12, 2021
A JavaScript Library that allows you to execute function when a certain element gets added to the document

wait-for-it.js A JavaScript Library that allows you to execute function when a certain element gets added to the document Getting Started If you want

Muhammad Tayyab Sheikh 12 Apr 26, 2022
Preview document wrtting in YOUR markdown.

Glance Vim Do you know the number of Markdown flavours in the world? Everyone has an own flavour. It's hard to find the suitable Markdown previewer fo

TANIGUCHI Masaya 31 Dec 6, 2022
A Node.JS tool to automatically install or update your FiveM server artifacts.

ItsANoBrainer FiveM Artifact Updater FiveM Artifact Updater is an application created with Node.JS to easily and quickly install/update your artifacts

null 23 Dec 8, 2022