modular innovation user experience

jQuery Plugin: It’s CuteTime!

Jeremy Hornby
10 Comments on jQuery Plugin: It’s CuteTime!
Many online social products, and more continue to, avoid a formal timestamp format... 2009-10-10 23:14:17 and Thu, October 29, 2004 12:14:19 PM ... opting for more user friendly, "warm and fuzzy," human-readable styles... 9 days ago and 5 years ago. As a result, the time has come for the jQuery CuteTime plugin. CuteTime goes beyond similar tools and lets you easily: convert timestamps to 'cuter' language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!), customize the time scales and output formatting, and dynamically update the displayed CuteTime(s) upon request and/or automatically.

jquery-logo-256 02_facebook-cutetime Many online social products, and more continue to, avoid a formal timestamp format…

2009-10-10 23:14:17 and Thu, October 29, 2004 12:14:19 PM

… opting for more user friendly, “warm and fuzzy,” human-readable styles…

9 days ago and 5 years ago.

As a result, and also in my quest to always help provide my clients free, cheap and easy to use tools, I have been on the lookout for a jQuery plugin that would provide the ability to easily…01_digg-cutetime

  • convert timestamps to ‘cuter’ language-styled forms (e.g. yesterday, 2 hours ago, last year, in the future!),
  • customize the time scales and output formatting, and
  • dynamically update the displayed CuteTime(s) upon request and/or automatically.

While there are other similar tools out there in JavaScript, PHP, and, I am sure, many other languages, none adequately met my goals. Therefore, I created the jQuery CuteTime plugin.

Usage

CuteTime is a customizable jQuery plugin (jQuery.cuteTime) that automatically converts timestamps to formats much cuter. Also, it has the ability to dynamically re-update and/or automatically update timestamps on a controlled interval.

As a Function

If used as a function, a string containing a cuteTime version of the provided timestamp is returned.

$(document).ready(function () {
	// timestamp MUST be a valid Date().parse 'able' format
	$.cuteTime('2009/10/12 22:11:19');
});

<html>
	<body>
		<div class='predetermined'></div>
	</body>
</html>


As a Method

If used via Selector, CuteTime replaces the text of the provided object with a cuteTime.

$(document).ready(function () {
	$('.timestamp').cuteTime();
});

<html>
	<body>
		<div class="timestamp">
			2009/10/12 22:11:19
		</div>
		<div class="timestamp">
			2008/11/01 07:11:00
		</div>
		<div class="timestamp">
			2018/11/01 07:11:00
		</div>
		<div class="timestamp"></div>
		<div class="timestamp" cutetime="1980/10/12 22:11:19">
			2009/10/12 22:11:19
		</div>
		<div class="timestamp" cutetime="asd">
			10/12/2009 22:11:19
		</div>
		<div class="timestamp" cutetime="asd">
			aoisd
		</div>
		<div class="timestamp" cutetime="asd"></div>
	</body>
</html>

When initialized, the cuteTime() call either updates or assigns the ‘cutetime’ attribute to the provided objects. Method implementation supports chaining, returning the jQuery object.

e.g. <div class=’timestamp’ cutetime=’2009 10 12 22:11:19′>2009 10 12 22:11:19</div>

If the cutetime attribute already exists within the provided object, then the text within the object is ignored in the cutification process. If the cutetime attribute does not exist or an invalid one is provided, then a valid cutetime attribute is assigned to the object.

If the cutetime attribute is missing, then it is calculated from the text of the provided object.

If neither cutetime attribute nor valid object text exist, then the timestamp is assumed to be ‘now’.

When using CuteTime in the form…

<br />
$(document).ready(function () {
	remember_the_cuteness = $('.timestamp').cuteTime();
});

… the following methods can be used …

// stops all automatic updates of refresh-enabled timestamps
remember_the_cuteness.stop_cuteness();

// (re)starts the automatic updating of timestamps
// REMINDER: make sure refresh is set to > 0
remember_the_cuteness.start_cuteness();

// updates timestamps of the provided objects
remember_the_cuteness.update_cuteness();

Settings

By default, automatic updating is disabled and the following CuteTimes can be displayed…

the future!
just now
a few seconds ago
a minute ago
x minutes ago
an hour ago
x hours ago
yesterday
x days ago
last month
x months ago
last year
x years ago

To change these settings, they can either be accessed directly…

$.fn.cuteTime.settings.refresh = 10000;

… or at the time of initialization …

my_cutetime = $('.timestamp_move').cuteTime({ refresh: 60000*10 });

The default settings data structure is…

$.fn.cuteTime.settings = {
	refresh: -1,			// time in milliseconds before next refresh of page data; -1 == no refresh
	time_ranges: [
		{bound: NEG_INF,	// IMPORANT: bounds MUST be in ascending order, from negative infinity to positive infinity
			cuteness: 'the future!',			unit_size: 0},
		{bound: 0,
			cuteness: 'just now',				unit_size: 0},
		{bound: 20 * 1000,
			cuteness: 'a few seconds ago',		unit_size: 0},
		{bound: 60 * 1000,
			cuteness: 'a minute ago',			unit_size: 0},
		{bound: 60 * 1000 * 2,
			cuteness: ' minutes ago',			unit_size: 60 * 1000},
		{bound: 60 * 1000 * 60,
			cuteness: 'an hour ago',			unit_size: 0},
		{bound: 60 * 1000 * 60 * 2,
			cuteness: ' hours ago',				unit_size: 60 * 1000 * 60},
		{bound: 60 * 1000 * 60 * 24,
			cuteness: 'yesterday',				unit_size: 0},
		{bound: 60 * 1000 * 60 * 24 * 2,
			cuteness: ' days ago',				unit_size: 60 * 1000 * 60 * 24},
		{bound: 60 * 1000 * 60 * 24 * 30,
			cuteness: 'last month',				unit_size: 0},
		{bound: 60 * 1000 * 60 * 24 * 30 * 2,
			cuteness: ' months ago',			unit_size: 60 * 1000 * 60 * 24 * 30},
		{bound: 60 * 1000 * 60 * 24 * 30 * 12,
			cuteness: 'last year',				unit_size: 0},
		{bound: 60 * 1000 * 60 * 24 * 30 * 12 * 2,
			cuteness: ' years ago',				unit_size: 60 * 1000 * 60 * 24 * 30 * 12},
		{bound: POS_INF,
			cuteness: 'a blinkle ago',			unit_size: 0}
	]
};

The parameters are defined (and all can be overridden) thus…

  • refresh
    • time in milliseconds before next refresh of page data;
    • a value of -1 disables refreshing
  • time_ranges
    • the array of bound_structures that delineate the cute descriptions associated with time_ranges
    • time_range’s boundary structures consist of the following variables…
  • time_range[x].bound
    • the value is an integer representing the time difference between the provided timestamp and now
    • the lower inclusive bound, or starting point, for using the ‘cuteness’ string that describes the current timestamp
    • the exclusive upper bound is defined by the next boundary structure definition in the time_ranges array [current boundary + 1]
  • time_range[x].cuteness
    • string to use in place of the current timestamp (e.g. ‘yesterday’)
  • time_range[x].unit_size
    • the integer divisor in milliseconds to apply to the calculated time difference
    • if unit_size > 0 then a number value is prepended to the cuteness string as calculated by time_difference / unit_size (e.g. 4 hours ago)
    • if unit_size = 0, then no number is prepended to the cuteness string (e.g. an hour ago)

BTW

Make sure you use timestamps that are fully recognized by the JavaScript Date object’s Parse method in all the IE and FF browser versions you want to support. Otherwise, prepare for a headache. 😉

Get It

You can download CuteTime, dual licensed under GPL and MIT, from…

jQuery Repository
http://plugins.jquery.com/project/CuteTime

Git
Public Clone URL: git://github.com/theproductguy/CuteTime.git
GitHub: http://github.com/theproductguy/CuteTime

Zip
jQuery.cuteTime_source-bundle_1.0_20091019.zip

Demo

http://theproductguy.com/cutetime/cutetime.demo.html

Status updates can be found here, jQuery CuteTime.
If you find this useful, or have any questions, ideas, or issues, leave a comment.

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks: Stumbleupon Del.ico.us Furl Reddit Google Add to Mixx!
Tags:

Published by Jeremy Horn

Jeremy Horn is an award-winning, product management veteran with 2 decades of experience leading and managing product teams. Jeremy has held various executive and advisory roles, from founder of several start-ups to driving diverse organizations in online services, consumer products, and wearables. As founder of The Product Group, he has created the largest product management meetup in the world and hosts the annual awarding of The Best Product Person. Accelerating the next evolution of product management, Jeremy acted as creator and instructor of the 10-week product management course at General Assembly and The New School, and mentoring at Women 2.0 and Lean Startup Machine (where is he also a judge). To see where Jeremy is now check him out at (1) http://linkedin.com/in/TheProductGuy and (2) http://TheProductGuy.com

10 comments

  3. First: Awesome idea!

    I’ve created a German version of the plugin settings, so users from Germany can also utilize it.

    Here’s the code:

    $(‘.timestamp’).cuteTime({
    time_ranges: [
    {bound: NEG_INF,
    cuteness: ‘in der Zukunft!’, unit_size: 0},
    {bound: 0,
    cuteness: ‘gerade jetzt’, unit_size: 0},
    {bound: 20 * 1000,
    cuteness: ‘vor ein paar Sekunden’, unit_size: 0},
    {bound: 60 * 1000,
    cuteness: ‘vor einer Minute’, unit_size: 0},
    {bound: 60 * 1000 * 2,
    cuteness: ‘ Minuten her’, unit_size: 60 * 1000},
    {bound: 60 * 1000 * 60,
    cuteness: ‘vor einer Stunde’, unit_size: 0},
    {bound: 60 * 1000 * 60 * 2,
    cuteness: ‘ Stunden her’, unit_size: 60 * 1000 * 60},
    {bound: 60 * 1000 * 60 * 24,
    cuteness: ‘Gestern’, unit_size: 0},
    {bound: 60 * 1000 * 60 * 24 * 2,
    cuteness: ‘ Tage her’, unit_size: 60 * 1000 * 60 * 24},
    {bound: 60 * 1000 * 60 * 24 * 30,
    cuteness: ‘letzen Monat’, unit_size: 0},
    {bound: 60 * 1000 * 60 * 24 * 30 * 2,
    cuteness: ‘ Monate her’, unit_size: 60 * 1000 * 60 * 24 * 30},
    {bound: 60 * 1000 * 60 * 24 * 30 * 12,
    cuteness: ‘letztes Jahr’, unit_size: 0},
    {bound: 60 * 1000 * 60 * 24 * 30 * 12 * 2,
    cuteness: ‘ Jahre her’, unit_size: 60 * 1000 * 60 * 24 * 30 * 12},
    {bound: POS_INF,
    cuteness: ‘vor langer Zeit’, unit_size: 0}
    ]
    });

    Like

  4. Pingback: The Product Guy: Superfine in 09 « The Product Guy

  5. First, thanks for a awesome plug in!

    The format 2011-05-04 09:49:24 (YYYY-MM-DD HH:MM:SS) become INVALID_DATETIME_FORMAT in Safari and also on iPhone, you got any solution how I can fix that?

    Like

    1. I have the same problemwith Safari 5.1 and also with IE9, both on Win7 Pro 64bit.
      The string is passed in this format:
      “2011-08-22 13:08:13”
      Seems that the function date_value() doesn’t work properly.
      Any suggestion?
      Thanks!

      Like

      1. A workaround is to change the time separators in the string that cuteTime has to modify:

        date_to_submit = date_to_submit.replace(/-/g, “/”);
        $(this).text($.cuteTime(date_to_submit));

        Bye.

        Like

  6. first of all thank you for nice plug in. auto refresh is not working with multiple divs with different class names.i have taken two divs and calling two diff functions

    $(document).ready(function () {
    $(‘.timestamp’).cuteTime({ refresh: 10000 });
    $(‘.xyz’).cuteTime({ refresh: 10000 });
    });

    auto refresh works only for one div. can you help me ?

    Like

Comments are closed.