Formatting date column in GridPanel

[ramana_l_v]

Thanks a lot I was able to solve my display problem.

I am facing another issue where the date is coming as "dob":"1980-12-25T00:00:00" in JSON even though the format is set as 'm-d-Y'.

Display is working fine but when the form is submitted date format is not working. am I missing anything here.

var reader = new Ext.data.JsonReader({
    totalProperty: 'recordCount',
    successProperty: 'success',
    idProperty: 'pid',
    root: 'records'
}, [
    {name: 'dob', allowBlank: false , type:'date' , dateFormat:'d-m-Y H:i'},
]);

var writer = new Ext.data.JsonWriter({
    writeAllFields: true,
    listful : true
});

var userColumns =  [{
    header: "Date Of Birth", 
    width: 40, 
    sortable: true, 
    dataIndex: 'dob', 
    renderer:Ext.util.Format.dateRenderer('m-d-Y'), 
    editor: new Ext.form.DateField({
        name: 'dob_date', 
        width:90, 
        allowBlank:false
    }) 
}/*, you have a trailing comma here --- indent your code properly!!!! */
];

Thanks...

[mystix]

a grid renderer only renders data for display.
it doesn't control the format in which the data is sent to the server.

you need to format the dob column's underlying js Date object into an appropriate date string before sending it to the server. otherwise, the default date string format (i.e. "Y-m-d\\TH:i:s") will be used.

[kanister]

hi. i got similar problem. i send from server date in 2 formats:

1. "Tue Jan 11 18:24:59 GMT+05:30 2007"
rows:[{...,"date_realization":"Tue Jan 11 18:24:59 GMT+05:30 2007",...}]

2. "2007-02-02 00:01:01"
rows:[{...,"date_realization":"2007-02-02 00:01:01",...}]

ad1. it renders ok every time (i dont even need type:'date' in store.reader.fields)

ad2.
if i got no type:'date' in store.reder.fields it renders as : NaN/NaN/NaN

but if i have type:'date', result depends on rendering function:
- if i use new Ext.util.Format.dateRenderer('d/m/Y') - i got nothing (blank) in the grid cell.
- if i use function(v){return new Date(v).format('d/m/Y')}, - i got always 01/01/1970 (thats not my date!)

What is going on? How does server data should look like?

I want to send date in ISO like: yyyy-MM-dd hh:mms

ADNOTATION

i also managed to render this server format:
rows:[{....,"date_realization":1260763250000,....}] - no quots

by using function(v){return new Date(v).format('d/m/Y')} and no type:'date' in store.reader.field

but i really want to do it right with iso format. yyy-mm-dd hh:mm: ss

ANSWER

,type:'date',dateFormat:'c'...

[mystix]

ANSWER

,type:'date',dateFormat:'c'...

at-a-boy

i thought i was going to have to repeat stuff for the 1e5-th time...

[tolichsvs]

I have problem too. But ExtJs 3.1.1

        
var store = new Ext.data.JsonStore({
   ...
   ,root: 'data'
   ,totalProperty: 'totalCount'
   ,fields: [{name:'acctstarttime',type:'date',dateFormat:'Y-m-d H:i:s'}, 
              {name:'acctstoptime',type:'date',dateFormat:'Y-m-d H:i:s'}, 
               'acctsessiontime', 'acctinputoctets', 'acctoutputoctets','callingstationid']
   ...
});

grid columns

...
  columns: [
      {
          header: 'Начало сессии',
          dataIndex:'acctstarttime',
          renderer: Ext.util.Format.dateRenderer('d.m.Y H:i:s')
      },{ 
          header: 'Конец сессии',
          dataIndex:'acctstoptime',
          renderer: Ext.util.Format.dateRenderer('d.m.Y H:i:s') 
      }  ...

server return

{"totalCount":"132","data":[{"acctstarttime":"2010-03-01 09:20:45","acctstoptime":"0000-00-00 00:00:00" ...

acctstoptime rendered in grid as '30.11.1899 00:00:00'

[mystix]

There is nothing built into the Date class that detects "0000-00-00 00:00:00" from your server as a null date entry.

you'll need to write a custom renderer function for the respective column, or a custom convert function in your Store's Record definition, to deal specifically with the "0000-00-00 00:00:00" date string sent from your server.

[Sysmann]

If you are using mysql you can just use "NULLIF(ColumnName,'0000-00-00') as ColumnName" in the query to change zero dates to null and solve the 1970's problem.

[mystix]

If you are using mysql you can just use "NULLIF(ColumnName,'0000-00-00') as ColumnName" in the query to change zero dates to null and solve the 1970's problem.

assuming you have complete control over the server, then yes, that's definitely a better way to go.

[bee]

Hi,

I am facing different problem, which I am unable to configure. I resoved my problem of NaNNaNNaN by rendering datefield as editor : new fm.DateField({
format:'d/m/Y',
renderer :Ext.util.Format.dateRenderer('d/m/Y')
})

But when I select date from datefield and hit update button of roweditor, I get date format as for eg : Mon Apr 02 2012 00:00:00 GMT+0100 (GMT daylight Time). I want to appear the date as 02-04-2011.

Please let me know how to do settings.

[ssenlighta]

re:

1. stick with ISO-8601 date format.
2. 
   there's no "render" config.
   see http://extjs.com/docs/?class=Ext.gri...ember=renderer
   
   your ColumnModel definition should read
   

   { 
       header: 'Date', 
       dataIndex: 'Date', 
       renderer: Ext.util.Format.dateRenderer(Date.patterns.ShortDate)
   }

p.s. are you sure Date.patterns.ShortDate is defined?
be sure to check that.

What if i have got two dates : end date and start date into one cell ????