jQuery Plugin: CuteTime, C’est Magnifique! (v 1.1) [UPDATE]

Posted on February 1, 2010 by Jeremy Horn

I am very pleased to announce the latest major update to the CuteTime jQuery plugin.

CuteTime provides the ability to 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
update automatically and/or manually the displayed CuteTime(s).

Un-Cute	Cute
2010-1-27 23:14:17	a few days ago
Thu, October 29, 2004 12:14:19 PM	5 years ago

Since CuteTime was released last year, there continues to be a flood of excellent feedback from many of you consisting of suggestions, bug reports (less of these), and feature requests (more of these). Much of that feedback has coalesced into this latest major release.

As you may already have been able to tell, this latest update was, in part, inspired by the French language. Perhaps one of the greatest drivers, to whom I am grateful, of a central new feature within this release has been Bruno Morency, through whose guidance and linguistic support I was able to design a more robust, universal CuteTime for all languages and grammatical styles.

In addition to the inclusion of French CuteTime translations within the translations.txt file, this release, version 1.1, features…

ISO8601 date timestamp compliance
insertions using the %CT% pattern of computed numbers within the CuteTime cuteness
support for all foreign language characters and HTML
Spanish CuteTime translations, courtesy of Alex Hernandez
richer demos and test
improved settings flexibility of the CuteTime function
documentation updates (corrections and clarifications)

French, et al

Originally, CuteTime was developed with a less than universal syntactic centricity. Basically, CuteTime originally could handle the cuteness of presenting…

“a few seconds ago”
“last month”

…as well as prepend values resulting in…

” hours ago” becoming “4 hours ago”
” seconds ago” becoming “18 seconds ago”.

Now, in addition to supporting the prepending of the computed CuteTime,

the calculation can be inserted within the cuteness string, and
both formatted HTML styling and proper character accenting applied,

…resulting in the additional support for…

“il y a %CT% minutes” becoming “il y a 4 minutes”
“l\’année dernière” becoming “l’année dernière”
“<span style=’color: red; font-weight: bold’>in the future<span>” becoming “in the future“

ISO8601

Formatting of timestamps is the bane of many a developer. Especially onerous is the handling of “standard” time formatting by the front-end developer. The JavaScript Date Object() supports the IETF standard, defined in RFC 822 Section 5, at least in FireFox, with most backend systems providing and storing (or at least converting to) dates in ISO8601 form.

Now, when converting a normal time into a CuteTime it can be either formatted in a manner compatible with the JavaScript Date() Object …

Thu Oct 15 2009 22:11:19 GMT-0400 (Eastern Daylight Time)
Oct 15 2009 22:11:19

… or ISO8601 …

2009-11-24T19:20:30+01:00
2009-11
2009-11-24T13:15:30Z

Implementation

CuteTime is a customizable jQuery plugin that automatically converts timestamps to formats much cuter. It also has the ability to manually and/or automatically update timestamps on a controlled interval.

If used by Selector, it replaces the text of the provided object with a CuteTime.
If used as a function, it returns a string containing a CuteTime version of the provided timestamp.

$('.timestamp').cuteTime();
$('.timestamp').cuteTime({ /* OPTIONS * / });

cutetime_object = $('.timestamp').cuteTime();
cutetime_object.update_cuteness();

$.cuteTime('2009/10/12 22:11:19');
$.cuteTime({ /* OPTIONS * / }, '2009/10/12 22:11:19'); // [NEW!]

For more details about the latest CuteTime improvements and their implementation, visit http://tpgblog.com/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:

jQuery Plugin: It’s CuteTime! (v 1.0.5) [UPDATE]

Posted on November 30, 2009 by Jeremy Horn

I am happy to announce the latest version of the CuteTime jQuery plugin.

CuteTime provides the ability to 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.

There was some excellent feedback from many of you following the initial release of CuteTime. And much of that feedback has been incorporated into this release.

Changes to Version 1.0.5…

updated the ‘cutetime’ attribute to use HTML 5 compliant ‘data-timestamp’ custom attribute
updates to settings are now non-constructive
added translations.txt to the bundle to store all contributed translations of the cuteness translations (special thanks to Vincent Rolfs for providing the first translation, German)
minified version now compiled using YUI Compressor

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

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

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

Implementation

$('.timestamp').cuteTime();
$('.timestamp').cuteTime({ /* OPTIONS * / });

cutetime_object = $('.timestamp').cuteTime();
cutetime_object.update_cuteness();

$.cuteTime('2009/10/12 22:11:19');

For more details about CuteTime and its implementation, visit http://tpgblog.com/CuteTime

Enjoy!

Jeremy Horn
The Product Guy

Add to Social Bookmarks:

jQuery Plugin: It’s CuteTime!

Posted on October 26, 2009 by Jeremy Horn

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…

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:

The Product Guy

Discussion, advice, and reviews regarding online products, the people behind them and the trends they represent, from Modular Innovation and Product Management to User Experience and Quick-UX.

Tag Archives: cute

jQuery Plugin: CuteTime, C’est Magnifique! (v 1.1) [UPDATE]

French, et al

ISO8601

Implementation

jQuery Plugin: It’s CuteTime! (v 1.0.5) [UPDATE]

Changes to Version 1.0.5…

Implementation

jQuery Plugin: It’s CuteTime!

Usage

Settings

BTW

Get It

Demo

Follow “The Product Guy”

French, et al

ISO8601

Implementation

Share this:

Changes to Version 1.0.5…

Implementation

Share this:

Usage

Settings

BTW

Get It

Demo

Share this:

Follow “The Product Guy”