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
![gmail_logo_stylized_thumb35[3]](http://theproductguy.files.wordpress.com/2009/10/gmail_logo_stylized51.gif "gmail_logo_stylized_thumb35[3]"){kind=logo}
