08 August 2009 ~ 12 Comments

ExtJS Date format demystified

Dates, time, timezones and date format hunts me.

Right now it feels like there are  5 millions way of writing the same datetime. Let’s say 7/8/2009. Is that 7. August 2009, or is it 8. July 2009? Most of the world thinks it’s 7. August, but the Americans think it’s 8. July. We are no better in Norway actually, writing 07.08.2009. I know this is 7. August, but thats just because I grew up here.

We should really appreciate ISO8601! I love this standard. Writing 2009-08-07 is great, start with the year, then break it down to smaller pieces. Natural and no hazzle or discussion. And simple to parse.

I started writing this post as a quite harsh criticism of ExtJs and their Date class. Now I only find it’s docs a bit uncomplete. I don’t think it should be necessary to read very much sourcecode to use a library like ExtJS. In other words, this blogpost should not be needed.

I have been thinking of ExtJs’s Date class as something special. But it’s not. It’s actually very very simple. It just extends the regular Date object you find in Javascript with some interesting methods. The ones I’ll cover now is:

- parseDate()

- format()

parseDate() is the ISO8601 helper.

var iso_date = Date.parseDate("2008-01-11 22:00:00", "Y-m-d H:i:s");
alert(iso_date.format("d.m.Y H:i:s")); // alerts 01.11.2008 22:00:00

This is the basic basics.

Line 1: Date.parseDate() returns a Date object based on the format you specify and is a grat alternative to the ugly variant:

var date = new Date('11/1/2008 10:00:00 PM GMT+0100');

Let’s move along, let’s say we have a store. A JsonStore, with three columns: firstname, lastname and date-of-birth. And date-of-birth is stored in ISO 8601 format.

 // Setup the fields
var fields = [
'firstname',
'lastname',
// Notice how we define the date of birth field with type 'date'.
{ name: 'dob', type: 'date'}
];

// Setup the column headers for the grid
var columns= [
{header: 'Firstname'},
{header: 'Lastname'},
// Notice first how we set at renderer for the date of birth column.
// Notice: date.format("d.m.Y"). This can be used because the parameter date will
// be an instance of the Date object.
{header:'Date of birth', renderer: function(date) { return date.format("d.m.Y"); } }
];

// Sets up a record
var rec    = new Ext.data.Record.create([
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
// Notice both type: 'date' and dateFormat: 'Y-m-d'. That means we have a date object,
// stored in the format Y-m-d.
{ name: 'dob', type: 'date', dateFormat: 'Y-m-d'}
]);

// Sets up the reader
var reader = new Ext.data.ArrayReader({}, rec);

// Some example data
var data = [
['John', 'Doe','1980-05-06'],
['Jane', 'Doe','1977-06-02'],
['Joan', 'Doe','1945-01-02']
];
// The store
var store = new Ext.data.Store({
fields: fields,
reader: reader,
data  : data
});

// And finally a grid to put this all together.
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
renderTo: "container"
});

There will be more about Dates later on. Questions or comments?

Follow me on http://twitter.com/NilsFredrik

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide

12 Responses to “ExtJS Date format demystified”

  1. Andy Cramb 12 August 2009 at 10:30 Permalink

    Nice article
    The more articles on Ext JS the better. I am a big fan of the library
    Is it worth adding/exlaining the renderTo property on the grid and the html content required on the html page to render the grid. It would make instantly complete for newbies so that it would work out the box. That is of course assuming they have set up Ext correctly:-)
    Andy

  2. mystix 12 August 2009 at 10:31 Permalink

    interesting read.

    replied to your forum post:
    http://extjs.com/forum/showthread.php?p=370906#post370906

    guess you don’t monitor the forums much =)

  3. Nils-Fredrik G. Kaland 12 August 2009 at 20:39 Permalink

    @mystix: Read it a few days ago, just haven’t had the time to comment it untill now!

  4. jgilc 26 February 2010 at 20:25 Permalink

    I am having troubles with date internationalization please see http://www.extjs.com/forum/showthread.php?p=438799#post438799
    Thank you,
    Best regards, gil.

  5. Xo66uT 10 March 2010 at 14:54 Permalink

    Great thanks for this article, i spend 2 hour to format date in IE6.
    This
    var Deadline = new Date();
    Deadline = Date.parseDate(iso_date, “Y-m-d H:i:s”);
    Deadline.format(‘Y-m-d’);
    always return date in ISO, not formated at all.
    Your code is work good.

  6. Gillian 10 December 2010 at 01:06 Permalink

    Thanks for this. I had spent a few days (on and off) searching for how to get JSON dates to render in a grid instead of the wonderful ‘NAN’ I kept getting!

    My code now works.

  7. Alison Zirker 26 December 2010 at 19:23 Permalink

    Great post!

  8. Deckard Cain 23 April 2011 at 07:53 Permalink

    Nice Post! I had a lot of problem with dates today. Maybe it can help someone:

    If you are having a problem with the format of the date returned from your server side, you can use a converter in the model to parse it correctly:

    // Receive the date from the model
    function date_mysql(v, record){
    return iso_date(v);
    }

    // Parse ISO date
    function iso_date(string) {
    var date = new Date();
    var parts = String(string).split(/[- :]/);

    date.setFullYear(parts[0]);
    date.setMonth(parts[1] – 1);
    date.setDate(parts[2]);
    date.setHours(parts[3]);
    date.setMinutes(parts[4]);
    date.setSeconds(parts[5]);
    date.setMilliseconds(0);

    return date;
    }

    // MyModel with two fields
    Ext.define(‘MyModel’, {
    extend: ‘Ext.data.Model’,
    fields: [{
    name: 'id',
    type: 'int'
    },
    {
    name: 'lastUpdate',
    type: 'date',
    convert: date_mysql, // Use the converter to understand
    //server date format
    dateformat: 'd/m/Y H:i:s'
    }],
    … // rest of the model
    });

    And in the column of the Grid, use the renderer you want:

    columns : [{
    text : "Id",
    dataIndex : 'id',
    }, {
    text : "Last Update",
    dataIndex : 'lastUpdate',
    renderer : Ext.util.Format.dateRenderer('d/m/Y H:i:s')
    }],

    Hope it helps anyone and avoid the NaN ;)

    tested on extjs 4 beta 2

  9. Nils-Fredrik G. Kaland 27 April 2011 at 22:46 Permalink

    Great, thanks for your contribution!

    Maybe it should be specified that the mysql date format from the server is in the format YYYY-mm-dd HH:ii:ss?

  10. Deckard Cain 28 April 2011 at 02:06 Permalink

    Yes, actually my Java Bean had a field with ‘Date’ type and it was returning something like:

    2011-04-24 03:00:49.0 GMT-03:00

    Now I changed the type to ‘Timestamp’ and is returning just YYYY-mm-dd HH:ii:ss

    I don’t need the converter anymore, so I think I’ll remove it for performance ;)

  11. You can then generate a private little ad for them wishing them a
    pleased birthday. Online social networking is very well-liked among teens these days and I have read about numerous
    legal incidents which have transpired because of to overexposed networking.
    7) If you really care about being private, don’t use a voice-mail at
    all.


Leave a Reply