Wednesday, 28 January 2009

Javascript Date Formatting

2 comments
I have created a timestamp JavaScript function called timestamp() to have better control over date formats to parsing feeds. There seemed no simple one function conversion in JavaScript of the what appears to be the standard JSON date format (well I have only looked at blogger and del.icio.us feeds so far). It only took a few minutes and so here it is:
function timestamp(ts) {
ts=ts.split('T');
var YMD=ts[0].split('-');
var HMS=ts[1].split(':');
var myTS= new Date();
myTS.setFullYear(YMD[0]);
myTS.setMonth(YMD[1]-1);
myTS.setDate(YMD[2]);
myTS.setHours(HMS[0]);
myTS.setMinutes(HMS[1]);
var now= new Date();
if ((myTS.getDate() == now.getDate()) && (myTS.getMonth() == now.getMonth())){
return myTS.toLocaleTimeString();
}
else return myTS.toLocaleDateString();
}
You can see the results on the right-hand sidebars in "Recent Posts", "Recent Comments" and "Comments Elsewhere". If a post is today it presents the hh:mm:ss format and if older than day (from midnight) it presents the date in your locale, which is something US Americans need to learn given their counter-intuitive peculiar date formatting. Using the locale it should present dates in the form that you are familiar with, wherever you are.

Feel to use it if you are a hacker or tell me if I have been stupid in parsing it this way. You can either copy and paste it above or download timestamp.js [1]The rest of you will have to wait for my next posts.

Postscript: I tried using scribefire for this but had problems over the code formatting that were difficult to fix even on the Blogger editor or the Windows Live Writer. Anyway I have reverted to my preferred method: See HTML and JavaScript inside blogger posts using custom display boxes for style sheet changes and Making your code postable to actually generate the code.

Postscript 2: It took longer to publish this post than to write and test the code. Well I was testing scribefire for this but code handling seems to be awkward for all editors so maybe it was an unfair test?

Postscript 3: Yes the JSON date format is ISO yyyy-mm-ddThh:mm:ssZ a regular expression should be a sorter way of parsing this but no more time to spend on this.

Postscript 4: Here is a regular expressions version piece of the aboe lifted from json_parse.js on json.org. You can dowload it here.

function timestamp(ts) {
re= new RegExp(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/);
var a = new Array();
a= re.exec(ts);
var myTS= new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4],+a[5], +a[6]));
var now= new Date();
if ((myTS.getDate() == now.getDate()) && (myTS.getMonth() == now.getMonth())){
return myTS.toLocaleTimeString();
}
else return myTS.toLocaleDateString();
}
Finally I combined the two dropping the regular expression but making the code shorter overall, quite readable and less prone to typing errors (can you tell what happens if you lose a character in the regular expression?). Note: this version does not capture seconds (don't need to for these apps):

function timestamp(ts) {
ts=ts.split('T');
var D=ts[0].split('-');
var T=ts[1].split(':');
var myTS= new Date(Date.UTC(D[0],D[1]-1,D[2],T[0],T[1],0));
var now= new Date();
if ((myTS.getDate() == now.getDate()) && (myTS.getMonth() == now.getMonth())){
return myTS.toLocaleTimeString();
}
else return myTS.toLocaleDateString();
}
[1]This is the now version you can download from the above link.

2 comments:

Anonymous said...

You know, it's a pity that you don't use Wordpress. You could have been a good plugin writer ;)

Martin Freedman said...

Thanks db0. This was all a little bit of fun looks like I have become a Blogger Gadget writer instead! I now have enough Blogger material to send a post a day for the next week or two.
Back to more important issues.