JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Jquery Timeago

    Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago").
    Filed under  › 

    • 🔾68%Overall
    • 3,816
    • 28.4 days
    • 🕩711
    • 👥26

    timeago: a jQuery plugin

    NPM Bower

    Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago") from ISO 8601 formatted dates and times embedded in your HTML (à la microformats).

    Usage

    First, load jQuery and the plugin:

    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.timeago.js" type="text/javascript"></script>
    

    Now, let's attach it to your timestamps on DOM ready - put this in the head section:

    <script type="text/javascript">
       jQuery(document).ready(function() {
         $("time.timeago").timeago();
       });
    </script>
    

    This will turn all <time> elements with a class of timeago and a datetime attribute formatted according to the ISO 8601 standard:

    <time class="timeago" datetime="2011-12-17T09:24:17Z">December 17, 2011</time>
    

    into something like this:

    <time class="timeago" datetime="2011-12-17T09:24:17Z" title="December 17, 2011">about 1 day ago</time>
    

    <abbr> elements (or any other HTML elements) are also supported (this is for legacy microformat support and was originally supported by the library before the time element was introduced to HTML5):

    <abbr class="timeago" title="2011-12-17T09:24:17Z">December 17, 2011</abbr>
    

    As time passes, the timestamps will automatically update.

    If you want to update a timestamp programatically later, call the update function with a new ISO8601 timestamp of Date object. For example:

    $("time#some_id").timeago("update", "2013-12-17T09:24:17Z");
    // or
    $("time#some_id").timeago("update", new Date());
    

    For more usage and examples: http://timeago.yarp.com/

    For different language configurations: visit the locales directory.

    Settings

    cutoff : Return the original date if time distance is older than cutoff (miliseconds).

    // Display original dates older than 24 hours
    jQuery.timeago.settings.cutoff = 1000*60*60*24;
    

    Changes

    Version Notes
    1.6.x (compare) Wraped locales in UMD wrappers; locale improvements
    1.5.x (compare) Added Date as argument to update function; locales
    1.4.x (compare) Added allowPast setting; locale updates
    1.3.x (compare) Added updateFromDOM function; bug fixes; bower support
    1.2.x (compare) Added cutoff setting; locale updates
    1.1.x (compare) Added update function; locale updates
    1.0.x (compare) locale updates; bug fixes; AMD wrapper
    0.11.x (compare) natural rounding; locale updates;
    0.10.x (compare) locale updates
    0.9.x (compare) microsecond support; bug fixes
    0.8.x (compare) <time> element support; bug fixes
    0.7.x (compare) locale function overrides; unit tests
    ... ...

    Author

    Ryan McGeary (@rmm5t)

    License

    MIT License

    Show All