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