How to display time and date in extjs

How can I display date/time in grid panel. The date is coming from server side asp.net web service as:

{9/14/2009 10:23:00 AM}

I am getting an error in displaying the date and time. It shows NaN/NaN/NaN 12:NaN:NaN PM

var store = new FMP.AspNetJsonStore({
            fields: [
                      { name: 'DateOccurred'}
                     ],
 });

var dateRenderer = Ext.util.Format.dateRenderer('m/d/Y h:i:s A');

 { header: xppo.st('SDE_DATE_OCCURRED'), width: 75, sortable: true,
     dataIndex: 'DateOccurred', renderer: dateRenderer },

In the store if I define fields:

[ { name: 'DateOccurred', type: 'date', dateFormat开发者_如何学Go: 'm/d/Y'} ],

... it displays a blank field.

Please help me in this issue.

---

The specified dateFormat must match the date string exactly for it to parse. The format 'm/d/Y' fails because it is missing the time component and 'm' expects a 2 digit month. A dateFormat which successfully parses your example date string is:

'n/d/Y H:i:s A'

You can also try omitting dateFormat while leaving the field's type set to 'date'. In absence of a specific format ExtJS will fall back on Date.parse.

---

I agree with owlness but I wanted to add a few more comments to this answer since I have come across it in multiple forms.

One thing to look at is your browser also. I had noticed while coding to resolve this problem that my browser would go into compatibility mode and drop down to IE 8 and then show this issue while using IE 11 thanks to registry settings in my place of business. To get around compatibility mode problems on your web page try adding the following HTML meta tag below to your initial HTML page that is calling your Ext JS app files.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Is your grid column or other xtype object set to a date field, what about your model, is the model actually using a date column type. Take a look at the Models fields and set the problematic date field type() to date like this:

type: 'date',
...

Another item to look at is to validate the format of the data your getting back from your server call. It looks like your getting a straight JSON serialized Date object. I have seen these objects also returned as so {"Date":"2014-09-18T00:00:00" ...} and the T character in the serialized data has caused issues.

If you need to format for such a scenario include the escape characters in the dateFormat() config setting your using for your model. here is an example of setting that with the escaped character in it: dateFormat: 'Y-m-d\\TH:i:s',

Finally my last resolution is that if your still having issues with your dates showing up and none of the above suggestions have worked for you, try setting the dateReadFormat() and the dateWriteFormat() config settings, these settings will override the first setting we discussed dateFormat(). I am not sure why but for some reason these two separate settings being used have resolved my date issues where the single date Format config setting did not. It might have to do with the Writer, I am just not clear at this time.

The code will probably look something similar to this:

...    
dateReadFormat: 'Y-m-d\\TH:i:s',
dateWriteFormat: 'Y-m-d\\TH:i:s',
...

I hope this helps a few people out there...