What is the correct date format for a Date column in YUI DataTable ?

Question

I have produced a data table. All the columns are sortable. It has a date in one column which I formatted dd/mm/yyyy hh:mm:ss . This is different from the default format as defined in the doco, but I should be able to define my own format for non-american formats. (See below)

The DataTable class provides a set of built-in static functions to format certain well-known types of data. In your Column definition, if you set a Column's formatter to YAHOO.widget.DataTable.formatDate, that function will render data of type Date with the default syntax of "MM/DD/YYYY". If you would like to bypass a built-in formatter in favor of your own, you can point a Column's formatter to a custom function that you define.

The table is generated from HTML Markup, so the data is held within "" tags.

This gives me some more clues about compatible string dates for javascript:

In general, the RecordSet expects to hold data in native JavaScript types. For instance, a date is expected to be a JavaScript Date instance, not a string like "4/26/2005" in order to sort properly. Converting data types as data comes into your RecordSet is enabled through the parser property in the fields array of your DataSource's responseSchema

I suspect that the I'm missing something in the date format. So what is an acceptable string date for javascript, that Yui dataTable will recognise, given that I want format it as "dd/mm/yyyy hh:mm:ss" ?

Answer 1

Javascript is able to construct a Date using a datestring in the following format:

new Date("April 22, 2010 14:15:23");

If you don't have control of the format of the datestring on the server-side (or don't want to change it) write a custom parsing function that takes the datestring and returns a newly constructed Date object.

You could either use this parser function when constructing the data represented in your DataTable.

rows:[{name:"John",born:customParser("[date string here"]},
      {name:"Bill",born:customParser("[date string here"]}
     ]

-OR-

If you are using Yui's DataSource module (as indicated by your second grey box), you can register this parser function on the date field so that it will already be a Date() before the DataTable is constructed.

dataSource.responseSchema = {
    . . .
    fields: [
        ...
        { key: "birth_dt", parser: customParser }
        ...
    ]
    ....
}

Answer 2

Define your locale

YAHOO.util.DateLocale["pt-BR"] = YAHOO.lang.merge(YAHOO.util.DateLocale, {
    x:"%d/%m/%Y"
});

And your column settings as follows

{key:"columnKey", label:"columnLabel",  
    formatter:function(container, record, column, data) {
        container.innerHTML = YAHOO.util.Date.format(data, {format:"%x"}, "pt-BR");
    }
}

Answer 3

You can pass dates from server to client in any format you wish, just in DataSource.responseSchema.fields set parser field to a function that will parse it. Look for stringToDate in dynamic data example.

On client side, you can display Dates in any other format, providing function in formatter field in respective ColumnDefs.

In order to set whole DataTable's date format, set its dateOptions option; alternatively, you can set ColumnDef.dateOptions, all same as described in YAHOO.util.Date.format() docs for oConfig parameter.

For current locale and whole DataTable, it should be

  var myConfigs = {
    initialRequest: ...
    ...
    // http://developer.yahoo.com/yui/docs/YAHOO.util.Date.html
    dateOptions: {format: '%c'} 
  };

You can also set sLocale there.