A front-end development blog

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