KendoUI TimePicker and DateTimePicker in Grid: Yes, we can!

KendoUI has widgets for Time and DateTime but you cannot use them in a Grid: this is pretty common when you introduce features in an existing product and it is not that easy fix modifying the sources. So, how can we get it?

KendoUI TimePicker and DateTimePicker in a Grid

Background

Lets review some of the tools that KendoUI provide us for solving this problem:

1. Supported data types.
2. Formatting.
3. Editing templates.

KendoUI supported data types

Don’t look for it, there is no data type for time (according to KendoUI documentation you have: "string", "number", "boolean" and "date") but date includes time. This in not bad since we should understand that the widgets refer to visual representation and not data storing.

Then we should use date (no matter if we define the field using Schema Model in a DataSource or just store the data in the JSON array).
In the example we will display using a KendoUI grid the following JSON object:

var entries = [
    { "city":"Boston", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z" },
    { "city":"Kyoto", "time":"23:14", datetime: "2012-08-28T23:14:00.000Z"},
    { "city":"La Paz", "time":"10:14", datetime: "2012-08-28T10:14:00.000Z"},
    { "city":"San Francisco", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z"},
    { "city":"Salt Lake City", "time":"08:14", datetime: "2012-08-28T08:14:00.000Z"},
    { "city":"Salvador", "time":"11:14", datetime: "2012-08-28T11:14:00.000Z"},
    { "city":"Salzburg", "time":"16:14", datetime: "2012-08-28T16:14:00.000Z" },
    { "city":"San Diego", "time":"07:14", datetime: "2012-08-28T07:14:00.000Z" }
];

KendoUI cell formatting

Next is since we are using a Date object is choose how to represent the data (format). For this the easiest way is using format option in columns, something like this:

columns:[
    { field:"city", title:"City" },
    { field:"time", title:"Time", format:"{0:HH:mm}" },
    { field:"datetime", title:"Date - Time", format:"{0:yyyy-MM-dd HH:mm}" }
],

For time field, I have chosen to display the hour between 0-23  (HH) and minutes (mm) while for Date-Time, I have chosen four digits year (yyyy), month as digit between 1 and 12 and day of the month (dd) plus hours and minutes.

Using this I get the following grid:

KendoUI Grid with Date and Date-Time cells

Now, the question is when editing what I get is:

KendoUI DatePicker used for time field.

and this:

KendoUI DatePicker used for date-time field.

Both for field time and datetime the widget is a kendoDatePicker but not the kendoTimePicker and kendoDateTimePicker that we would like.

NOTE: this is actually understandable since JavaScript dates are mapped into kendoDatePicker.

KendoUI get kendoTimePickers and kendoDateTimePickers in a Grid

First is using the editor option in KendoUI Grid Columns definition (see this for documentation) that is a function that shall generated required HTML for getting the editor.

Following, the new Columns definition:

columns:[
    { field:"city", title:"City" },
    { field:"time", title:"Time", format:"{0:HH:mm}", editor: timeEditor },
    { field:"datetime", title:"Date - Time", format:"{0:yyyy-MM-dd HH:mm}", editor: dateTimeEditor }
],

Where I have defined a timeEditor function for time field and a dateTimeEditor function for datetime field.

And these functions are defined as:

function timeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoTimePicker({});
}

function dateTimeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
}

These functions receive two arguments:

1. container: is the HTML element where we should introduce the input.
2. options: options including information as the name of the field.

So, I generate and input field that includes the name of the field got from options and as format the same used when displaying the value.
Now, my fields while editing are:

KendoUI TimePicker in a Grid

And this:

KendoUI Grid with Date and Date-Time cells

And in popup mode:

KendoUI TimePicker and DateTimePicker in a Grid