Change date format in ExtJS grid field

Question

simple question, but I can’t figure out how to solve it.

I get the date with the hour from JSON with this format:

"date_deb":"2013\/12\/28 23:00:00" 

Please note that \ to escape / and are not displayed. I would like to show these dates in this format in my grid:

 "28/12/2013 23:00:00" 

I tried this in defining my fields:

 {name:'date_deb', type: 'date', dateFormat: 'dmY H:i:s'} 

But it does not work, nothing is displayed. While checking out ExtJS docs, I saw this:

 dateReadFormat 

I am using ExtJS4.2

Answer 1

In the field definition, specify dateFormat as it is being returned from the server:

 {name:'date_deb', type: 'date', dateFormat: 'Y/m/d H:i:s'} 

and then in your column configuration use ExtJS's built-in dateRenderer with the format with which you would like to present your dates:

 renderer: Ext.util.Format.dateRenderer('d/m/YH:i:s') 

You will need dateReadFormat and dateWriteFormat if you have a reader (for reading data from the server) and a writer (for sending changed data to the server), which need different date formats. Otherwise, dateFormat will be used as the default format for both.

Answer 2

If the above does not work for you, try adding xtype: 'datecolumn' to the column configuration of your grid.

 columns: [{ text : 'date', dataIndex: 'LoginDateTime', xtype: 'datecolumn', format: 'Ymd g:i A', }] 

That should work.

Answer 3

use this function to render dates for the grid

In the column definition, define renderer like this

renderer: renderDate

example { dataIndex: 'TaskEndDate', header: 'PlannedEndDate', flex: 1, renderer: renderDate },

 function renderDate(value) { if (value == '' || value == undefined) { return ''; } else { getDate = new Date(parseInt(value.substr(6))); } return Ext.util.Format.date(getDate, 'md-Y'); }