Knockout-Kendo.js Grid date formatting

Question

I am using Knockout.js integration with Kendo UI Grid (http://rniemeyer.github.io/knockout-kendo/web/Grid.html).

In my JSON I am returning a date which shows up as Oct 06 2015, 03:54 PM -04:00.

I have specified the column type and the format as format: "{0:MM/dd/yyyy HH:mm tt}" but it seems it is getting completely ignored.

The following is the kendogrid binding definition:

<div data-bind="kendoGrid: {
  data: projectSubmissions,
  dataSource: {
    schema: {
      model: {
        fields: {
          SubmissionId: { type: 'number' } ,
          FormName: { type: 'string' } ,
          IdVersion: { type: 'string' },
          SubmittedDateFormatted: { type: 'string'},
          SubmittedDate: { type: 'date'},
        }
      }
    }
  },
  groupable: false,
  scrollable: false,
  filterable: {
    extra: false,
    operators: {
      string: {
          startswith: 'Starts with',
          eq: 'Is equal to',
          neq: 'Is not equal to'
      }
    }
  },
  sortable: true,
  pageable: { pageSize: 10 },
  columns: [
    {
      field: 'SubmissionId',
      title: 'No.',
      width: 70,
    }
    ,{ field: 'FormName', title: 'Form', width:120 }
    ,{ field: 'IdVersion', title: 'Id/Version', width:100}
    ,{
      field: 'SubmittedDate',
      filterable: true,
      title: 'Submitted Date',
      format: '{0:MM/dd/yyyy HH:mm tt}',
      width: 120
    }
    ,{ field: 'Inspector', title: 'Inspector', filterable: true, width:140 }
    ,{ field: 'CellNo', title: 'Cell No.', width:100, filterable: false }
  ]
}"></div>

Answer 1

Your problem is not with the format setting. This controls how to format a value for display. Your problem is with the value itself. For the format to succeed, the value needs to be a Date object to begin with, and as it is now, it's a string.

You could use a mapping object (as shown here) to create a Date object during the mapping process:

var mapping = {
  SubmittedDate: {
    create: function(options) {
              return new Date(options.data);
    }
};
ko.mapping.fromJS(data, mapping, this);

Answer 2

The root problem is that the JSON spec defines no Date data type. Since there is no standard, all kinds of string formats are being used to represent dates in JSON documents. The Kendo Grid however expects Date objects, not strings.

In your case it appears as if the server sends "Oct 06 2015, 03:54 PM -04:00", which is actually one of the formats that Date.parse() would accept.

JavaScript's JSON.parse() function mitigates this omission in the standard by accepting a reviver function that can convert any special values in your JSON according to your rules. This is commonly used to "revive" dates.

Adapted to your input JSON:

function reviveDates(key, val) {
    if ( key === "SubmittedDate" ) {
        return new Date(val);
    }
    return val;
}

and

JSON.parse(yourJSON, reviveDates);

To make this more convenient you can actually integrate that into jQuery's low-level Ajax routines so that you don't have to deal with date conversion at the higher level at all:

$.ajaxSetup({
    converters: {
        'text json': function (data) {
            try {
                return JSON.parse(data, reviveDates);
            } catch (ex) {
                $.error("Invalid JSON: " + data);
            }
        }
    }
});