ExtJS 4 Formatting Microsoft AJAX serialized dates

• Tweet

• Tweet

Hello,

While working on the current project where my Javascript Client is communicating with .NET web services I came across this problem where I just wanted to format something like this

/Date(1344904977456+1000)/

August 14, 2012 10:42:57

ExtJS is a cool library that makes some tasks pretty easy. This is one of them.

You can easily format /Date(1344904977456+1000)/

using this code

dt = new Date('/Date(1344904977456+1000)/','MS');

Now if you print dt to your javascript console you will get something like this

console.log(dt);

outputs

Tue Aug 14 2012 10:48:47 GMT+1000 (AUS Eastern Standard Time)

But this is not what we want. There are couple of things that you can do here to beautify the above date.

Target date format

“August 14, 2012 10:48:47 “

ExtJS Date format option 1

This option is simple and something that you will use in production I believe.

Ok so our parsed date is stored in our defined variable called dt

lets format it now

var dateFormat= "F d, Y H:i:s";
var formattedDate = Ext.Date.format(dt,dateFormat);

Now if you print the above to your javascript console

console.log(formattedDate);
// outputs  August 14, 2012 10:48:47

ExtJS Date format option 2

Option 2 is a bit of a hack, lets check it out anyway

var unformattedMSDate = '/Date(1344904977456+1000)/';
 
if (unformattedMSDate.indexOf('/Date(') > -1) { 
     var msdate = unformattedMSDate.substring(6); 
     msdate = msdate.substring(0, msdate.indexOf(')/')); 
     dt = new Date(parseInt(msdate)); 
     console.log (Ext.Date.format(dt,dateFormatShort));
 
}

The result will be pretty much the same.

SO the thing I wanted to highlight in this post is the ways we can format a MS date.

I hope that this help you one way or another.

While I am working on this project I have a few more things to share regarding ExtJS Grids and other ExtJS tricks.

I will be posting on CSS and ExtJS and occasional ServiceStack and PHP tricks.

If you have something to add to this post please do so using comments. We are here to help each other and your contribution will help make web development world better place to be

Cheers

Advertisement