08 August 2009 ~ 18 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 = [
// 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

18 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:-)

  2. mystix 12 August 2009 at 10:31 Permalink

    interesting read.

    replied to your forum post:

    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.
    var Deadline = new Date();
    Deadline = Date.parseDate(iso_date, “Y-m-d H:i:s”);
    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.setMonth(parts[1] – 1);

    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

  12. Sanne 3 December 2016 at 11:46 Permalink

    Thanky Thanky for all this good infiamrtoon!

  13. kredit bei lohnpfändung möglich 22 December 2016 at 17:49 Permalink

    Mark,I’ll tell you what, If I had the misfortune to be rendered and were given the choice of being put in the custody of the U.S. Marines at Guantanamo or turned over to the tender mercies of the Egyptian Mukhabarrat, I’d take the jarheads at Gitmo any day.Actually I would take the Egyptian Mukhabarrat. Far more corrupt, and easier to influence, bribe, and get to do things my way. The jarheads at Gitmo are too brainwashed into thinking anyone brought to them is a spawn of Satan. No possibility of changing their minds or bribing them to let me go.

  14. kredit darlehen berechnen formel 12 February 2017 at 19:40 Permalink

    Jeg tror helt klart at ens bevidsthed om at være en god sælger, kan have en større positiv effekt, end hvad man som ren “fag-nørd” gÃ¥r og tror. Umiddelbart det at være en sælger, jo VEJEN til at levere det produkt/den service, som man brænder for..

  15. http://www.generatefreegold.win/ 28 February 2017 at 18:44 Permalink

    O'Reilly is the lowest of the low. Plays to conservative crowd while actually supporting the powers in D.C. Cancel cable to stop funding FOX, MSNBC, CNN and the rest of the propagandists.

  16. proxy server list 3 April 2017 at 01:57 Permalink

    Hi,I read your blogs named “ExtJS Date format demystified « Extjs « A front-end development blog” on a regular basis.Your humoristic style is witty, keep doing what you’re doing! And you can look our website about proxy server list.

  17. Frage zur HF P 1du schreibst, wetterfest ist diese Antenne nicht, soll das heißen es ist eine schön Wetter Antenne und bei Regen unbrauchbar?Da wir viel mit dem Wohnmobil unterwegs sind hätte mich diese Antenne interresiert.bitte um kurze Antwort mit besten 73Erich, OE5BVM

Leave a Reply