npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jlivetime

v0.0.13

Published

jQuery plugin for live timestamps, countdowns, time-ago, and timers

Downloads

23

Readme

jLiveTime

jQuery plugin for live timestamps, countdowns, time-ago, and timers

Features

  • Support for dates, timestamps, countdowns, time-ago, or timers using the same mechanism
  • Updates automatically, no performance-costly polling, content is updated only when needed
  • Supports standard html5 format <time datetime="">. A different attribute name can be used
  • Specify multiple formats per-range to switch automatically between date, time, countdown, time-ago or any custom format using the same html
  • Allows you to cache your html aggresively (it's completely independent of page generation time)
  • Show time in local timezone
  • Use different formatting for element html and tooltip
  • Milliseconds accuracy
  • To handles client clocks out of sync jLiveTime can perform an ajax request and use Date http response header. Server-to-Local offset is cached on sessionStorage (fallback to session cookie)
  • jQuery event 'refreshComplete' allows you to add visual effects (check DEMO)

DEMO


Requirements

  • jQuery 1.8+

Supported Platforms

Tested on IE8-9, Chrome, Firefox, Safari and Mobile Safari.

Unit testing is not implemented yet. You can try it on your browser visiting DEMO

Installation

npm install jlivetime

Add a reference in your html to jlivetime.js (dev) or jlivetime.min.js (minified)

Usage

HTML


	<!-- standard html5 format -->
	<time datetime="2012-11-15T18:23:00.000Z" data-time-label data-time-tooltip>November 15, at 18:23 (GMT)</time>

	<!-- using div and timestamp in milliseconds -->
    <div datetime="1353003780000" data-time-label>November 15, at 18:23 (GMT)</time>

	<!-- using nested labels -->
    <time datetime="2012-11-15T18:23:00.000Z">
    	<span data-time-label="td_h"> hours <span data-time-label="d_m"> minutes
    </time>

JavaScript


    // activate jLiveTime in a container, will format and automatically update all datetimes inside
    $(document.body).livetime();

    // deactivate jLiveTime in a container (stop refreshing)
    $(document.body).livetime(false);

    // if new content is added (eg. ajax reload), to refresh immediately you can call .livetime() at any time
	$(document.body).livetime();

Formatting

Timestamps

  • Year: yyyy => 2012
  • Month: M, MM, MMM, MMMM => 2, 02, Feb, February
  • Day of Month: d, dd => 8, 08
  • Weekday: e, ee, eee, eeee => 3, We, Wed, Wednesday
  • Hours: h, hh, H, HH => 1, 01, 13, 13
  • Minutes: m, mm => 9, 09
  • Seconds: s, ss => 5, 05
  • Milliseconds: f, ff, fff => 2, 02, 002
  • am/pm: t, tt => p, pm

Time Difference

To display time difference to current time (time elapsed, or time remaining) use d_ prefix.

(Timestamp components and Time difference can be combined in one expression)

  • d_s => seconds in difference (remaining or upcoming) from/to timestamp
  • td_s => total seconds from/to timestamp
  • d_fff => milliseconds in difference using 3 digits (add leading zeros)
  • td_w => total weeks from/to timestamp

Years: y, Months: M, Weeks: w, Days: d, Hours: h, Minutes: m, Seconds: s, Milliseconds: f

This can be used to display countdowns, timers or time-ago labels.

Note: to escape words in a format expresion wrap it with brackes, eg. This [mm] is escaped, this mm is not => This mm is escaped, this 04 not

Named formats

To avoid duplicating a format expression in all time elements you can create named formats.


	$.livetime.options.formats.shortDate = 'MMM d';
	$.livetime.options.formats.fullDate = 'eeee MMMM d yyyy';

Then you can use it like this:


	<time datetime="2012-11-15T18:23Z" data-time-label="#shortDate" data-time-tooltip="#fullDate"/>

When no format is specified _default and _default_tooltip formats are used.

Per-range Named formats

Named formats can be specified using ranges, to switch format expression based on seconds from/to timestamp


    $.livetime.options.formats.humanized = [
        [-360*24*3600, '#fulldate'],
        [-6*24*3600, 'MMMM d at h:mm tt'],
        [- 48*3600, 'eeee at h:mm tt'],
        [-24*3600, 'Tomorrow at h:mm tt'],
        [-7200, 'in td_h hours'],
        [-3600, 'in about an hour'],
        [-120, 'in td_m minutes'],
        [-60, 'in about a minute'],
        [0, 'in a few seconds'],
        [60, 'a few seconds ago'],
        [120, 'about a minute ago'],
        [3600, 'td_m minutes ago'],
        [7200, 'about an hour ago'],
        [24*3600, 'td_h hours ago'],
        [48*3600, 'Yesterday at h:mm tt'],
        [6*24*3600, 'eeee at h:mm tt'],
        [360*24*3600, 'MMMM d at h:mm tt'],
        ['#fulldate']
    ];

Events with Duration

You can add a duration to indicate an event has a duration, allowing you to use the end time (datetime + duration) in your format expression, example:


    <time datetime="2012-11-15T18:23:00.000Z" data-duration="600000" data-time-label="started td_s seconds ago, end_td_s seconds remaining" data-time-tooltip></time>
  • data-duration attribute contains duration in milliseconds
  • to use end time, add end_ prefix to any format expression (end_ss, end_d_s, end_dt_s, etc.)

Format ranges can use the end time as reference to:


    $.livetime.options.formats.customwithduration = [
        [-20, '#fulldate'],
        [-5, 'will start in a few seconds'],
        [0, 'will start in less than 5 seconds'],
        ['end-5', 'playing (end_td_s seconds remaining)'],
        ['end', 'playing (about to finish)'],
        ['end+60', 'finished'],
        ['finished (end_td_m minutes ago)']
    ];

Day-start/end relative ranges

There are a few cases where you want to specify a format relative to the start or end of the day where the event occurs. An example of this is when you want to show captions like "Today", "Tomorrow", "Yesterday".

This can be specified like this:


    $.livetime.options.formats.humanRelative = [
        [-360*24*3600, 'MMMM d, yyyy'],
        ['daystart-'+7*24*3600, 'MMMM d at h:mm tt'],
        ['daystart-'+24*3600, 'next eeee at h:mm tt'],
        ['daystart', 'tomorrow at h:mm tt'],
        ['dayend', 'today at h:mm tt'],
        ['dayend+'+24*3600, 'yesterday at h:mm tt'],
        ['dayend+'+7*24*3600, 'last eeee at h:mm tt'],
        [360*24*3600, 'MMMM d at h:mm tt'],
        ['MMMM d, yyyy']
    ];

Sync with Server Time

Current time is calculated using client machine clock, if it's out of sync To prevent that you can use an ajax request to a non-cached url (eg. returning a 0 byte document) to sync with server time. The offset will be cached using sessionStorage (fallback to a sesion cookie).


    $.livetime.options.serverTimeUrl = '/empty.txt';

Server time will be obtained from the http response Date header.

Minification

A minified version is provided as jlivetime.min.js To regenerate that file run (npm i is required as uglifyjs is used):

	npm i
	npm run-script minify