jQuery niceDate plugin

After looking on the internet for a jquery or javascript plugin that converts machine dates to readable ones like 12.12.2012 -> 2 days ago, I decided to write on my own. Since I am not a good javascript programmer feel free to correct my mistakes.

Features

  • multilanguage,
  • aware of language grammatics,
  • easy to hack,
  • available for past and future dates,
  • show original date on mouseover

Usage

The usage is simple if you are making a web site in Sloven language.

1
2
3
4
5
6
7
<script type="text/javascript" src="jquery.niceDate.js"></script><script type="text/javascript" src="i18n/sl.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
	$('.date').niceDate();
});
// ]]></script>
<span class="date">11.10.2011 13:30</span>

Settings

You can extend niceDate for your own language.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/*Slovenian date time formats*/
$.extend($.fn.niceDate.defaults, {
 
	pattern : /([0-3][0-9]).([0|1][0-9]).(\d{4})\s(\d{2}):(\d{2})$/, // 15.08.2011 15:30
 
	patternOrder : [3, 2, 1, 4, 5], // year, month, day, hour, minute
 
	dayOnly : true, // will show only days, no minutes or hours
 
	hoverShow : true, // will show original date on mouse over
 
	monthMessages : ['Januar', 'Februar', 'Marec', 'April', 'Maj', 'Juni', 'Juli', 'Avgust', 'September', 'Oktober', 'November', 'December'],
 
	dayMessages : {
		n : {
			0 : 'Danes',
			1 : 'Včeraj',
			2 : 'Pred 2 dnevoma',
			many : 'Pred %s dnevi'
		},
		p : {
			0 : 'Danes',
			1 : 'Jutri',
			many : 'Čez %s dni'
		}
	},
 
	hourMessages : {
		n : {
			1 : 'Pred 1 uro',
			2 : 'Pred 2 urama',
			many : 'Pred %s urami'
		},
		p : {
			1 : 'Čez 1 uro',
			2 : 'Čez 2 uri',
			3 : 'Čez 3 ure',
			4 : 'Čez 4 ure',
			many : 'Čez %s ur'
		}
	},
 
	minMessages : {
		n : {
			0 : 'Glih',
			1 : 'Pred 1 minuto',
			2 : 'Pred 2 minutoma',
			many : 'Pred %s minutami'
		},
		p : {
			0 : 'Glih',
			1 : 'Čez 1 minuto',
			2 : 'Čez 2 minuti',
			3 : 'Čez 3 minute',
			4 : 'Čez 4 minute',
			many : 'Čez %s minut'
		}
	}
 
});

Lets say you have +2 days difference with now and the date which is written in html, the plugin will look for message $.fn.niceDate.defaults.dayMessages.p.2 if it exists it will use this message if the message does not exist it will use the message with label p.many.

If you have -3 minutes the message will be loaded from $.fn.niceDate.defaults.minMessages.n.3 if it exists the message will be used otherwise the n.many label will be used.

You can also extend the function defaults.makeTimestamp which is responsible for parsing the dates which are received from the html. The function must return a Date object, or nothing is the date could not be parsed.

$.fn.niceDate.defaults.makeTimestamp = function(text) {
    var o = $.fn.niceDate.defaults;
    var matches = text.match(o.pattern);
    if(matches) {
	return new Date(matches[o.patternOrder[0]], matches[o.patternOrder[1]] - 1, matches[o.patternOrder[2]], matches[o.patternOrder[3]], matches[o.patternOrder[4]]);
    } else {
	return false;
    }
};

Download

The code is available at github. Current version is 0.2
https://github.com/silvester/jquery.niceDate

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *