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. It also has the ability to manually and/or automatically update timestamps on a controlled interval.

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

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

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’.

Date & Time

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 …

If you are counting on leveraging the JavaScript Date() Object handling of your timestamp, make sure you use timestamps that are fully recognized by the JavaScript Date object’s Parse method in all the browser versions you want to support. Otherwise, prepare for a headache. 😉

Demo

Release Notes

Version 1.0 – 2009/10/17
Initial Release.

Version 1.0.5 – 2009/11/10
[UPDATED] updated cutetime attribute to be HTML 5 custom attribute compatible and more flexible in the future; using data-timestamp and global constant TS_ATTR
[UPDATED] test/demo HTML files to work with new TS_ATTR
[UPDATE] minified version of javascript compiled with Google’s Closure Tools (new)
[FIXED] setting behavior is not as desired THEREFORE updated settings (temporarily) to be DESTRUCTIVE between updates
[FEATURE] added translations.txt to act as repository for all language translations for the CuteTime cuteness translations

Version 1.1 – 2009.11.26
[FEATURE] implemented case-sensitive variable %CT% that can be used anywhere within the cuteness strings; if not specified, and number insertion is called for, then prepends number to provided string; if no number is called for, then the %CT% is removed from the final string
[FEATURE] added support for foreign language characters and HTML within the cuteness strings
[FEATURE] accepts timestamps in format compatible with either/both JavaScript Date() Object as well as ISO8601
[UPDATED] test/demo files to also demo foreign language and %CT%
[UPDATED] test/demo files to also demo ISO8601
[FEATURE] settings can be submitted as parameter to CuteTime function call
[FEATURE] added French time translation to the translations.txt file (courtesy of Bruno Morency)
[FIXED] documentation to indicate that Number.NEGATIVE_INFINITY and Number.POSTIVE_INFINITY should be used within the bounds

I have one initial comment about this plugin, and its the usage of the custom element attribute “cutetime”. This attribute is invalid HTML, and without a custom DTD its also invalid XHTML. To be HTML5 valid you would have to use a data-attribute, such as “data-cutetime”.

What is it you want to do with the orginal timestamp, since you expose it as a element attrbute? You could use jQuery.data to store the orginal timestamp in the internal jQuery data-object. It would be way faster, because you minimize the DOM-access. But this way the timestamp would not be exposed in the DOM, and therefore not accessible from ouside of the jQuery context.

If you do want to expose the orginal timestamp into the DOM, and therefore into the semantics of the markup, then I think you should consider using the HTML5 data-attributes, and in that case I would rename the attribute to “date” or “timestamp”, since its information that describes the date-context in a generic way.

Sam – You sure can define future cutetime language and time ranges. You can define the ranges to be in the past or the future via the settings as desired. However, the plugin will only display 1 unit of granularity. In your example you could say something is going to happen “in about 3 days” or “in 72 hours”.

Looks like a great plugin, we would just like to suggest one update to your above settings code. Shouldnt the last bound be positive infinity? Currently you have both first and last bound as “Number.NEGATIVE_INFINITY”🙂

Thank you. The calculation is correct. In my examples I have defined yesterday to be between 24 and 48 hours ago — you example falls right within that window. The great thing about CuteTime is that it allows for the customization of times, units and timespans to suit your needs. Thereby allowing you to remove the “yesterday” label or even redefine it. Hope this helps clarify.

No current plans for supporting more than JavaScript and the ISO 8601 standard. But, I am open to greater support if demand emerges for other standards; but it appears that web dev is zeroing in on JavaScript Date() and ISO 8601.

If you are using PHP, you can easily make your timestamps compliant by…
$timestamp8601 = date(‘c’, strtotime($timestamp));

I have had a chance to walk through your code. It appears that the Date() object and methods are unique to Safari (different than IE, FireFox, Chrome). When you are not using an ISO8601 compliant timestamp, the CuteTime plugin uses the browser’s built in methods associated with the Date() object. As I caution in the documentation when not using ISO8601 timestamps: “If you are counting on leveraging the JavaScript Date() Object handling of your timestamp, make sure you use timestamps that are fully recognized by the JavaScript Date object’s Parse method in all the browser versions you want to support. Otherwise, prepare for a headache. ;-)”

I did also test your code in all browsers and everything appears to work fine. To most easily handle Safari (including all browsers) I recommend you use ISO8601 formatted timestamps. That should solve the issue you are experiencing.

gotta say that it’s a great plugin! Although 1 thing that annoys me is that you save the objects and then update them only. The problem comes if someone uses AJAX to display additional content, even if the class is the same those timestamps won’t be updated. If i use $(‘.timestamp’).cuteTime() again, it will update only the newly created ones, so I had to hack my app to make additional fields so i first copy all the values into all my spans, then call cuteTime.

Thanks so much for your reply. Yes, ideally if the time span is less than one minute, it displays seconds. If less than hour, it displays minutes and seconds. Less than one day displays hours and minutes, etc… Thanks so much!

Hello. Since Lithuanian language has some specifics I have made plugin translation to Lithuanian language. If anyone would like to download it, search “jquery-cutetime-lt-translation” in Guthub or use link below:

This plugin is great but you be careful to not use spaces because cutetime not working if there is spaces on left or right side of date in an html element.
Example:
This is not working on firefox : 2011-09-21T14:36:08Z
This is good : 2011-09-21T14:36:08Z

i just wanted to use the plugin on a new project of mine (http://www.tankwacht.de – calculates the fuel consumption and costs of your vehicles, currently its only available on german) and found out that the provided german translation isnt really suitable for a professional website as given strings have some wierd touch for a native speaker. Please understand, they are not wrong, but just a little wierd – a german never would say it that way.
So here is a customized version using the inline replacements for a proper german translation:

It seems there is a bug in the way milliseconds are handled. I am experiencing this on Chrome, Safari 5.0 and 5.1 and OmniWeb (which is basically the same as Safari 5.0). I haven’t tried other browsers.

The second call is correct. The first (which has millisecond precision) is not.
I am trying to figure out where in the cutetime lib to fix this but figured I’d report it in case someone else comes up with a solution faster than me.

I don’t think that’s right. JS timestamps are in MS, and ISO timestamps are in seconds. I’d bet it’s a regular expression that doesn’t look for non-integer numbers in the seconds slot – if true, and that’s fixed, then multiplying by 1000 is still correct.

You are right that the numeric representation of a JS timestamp is in milliseconds and ISO timestamp is in seconds however this is in the code which converts an iso8601 formatted string into a javascript Date object. Such a string looks as follows:
2009-11-24T19:20:30+01:00
or
2009-11-24T19:20:30.123+01:00

The time portion of an iso date string may have a millisecond portion like: hh:mm:ss.sss
The sss portion represents the milliseconds within the second and it ranges from 000 to 999.

The code snippet I referred to uses a regular expression to parse the “sss” portion from the date string then multiply it by 1000. This is incorrect. The “sss” portion should be converted to an integer and set on the date object directly.

An example might help. Converting the time portion of “2009-11-24T19:20:30.123+01:00” to a javascript Date object would look like this: