Knockout-Kendo.js Grid UI:datepicker filter

Question

I am using the Knockout-Kendo.js integration library I am trying to get the datepicker filter working. However, whenever I add filterable: {ui: "datetimepicker" } to my configuration nothing is shown on the page and no script errors.

My kendoGrid configuration looks like (here with filterable attribute on SubmittedDate)

            <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'},
                                            Inspector: { type: 'string'},
                                            CellNo: { type: 'string'},
                                        } 
                               } 
                    }    
                },                  
                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',
                                template: '<a href=\'#=DetailUrl#\' target=\'blank\'>#=SubmissionId#</a>' ,
                                title: 'No.',
                                width: 30    
                            }  
                            ,{ field: 'FormName', title: 'Form', width:120 }  
                            ,{ field: 'IdVersion', title: 'Id/Version', width:100}
                            ,{
                                   field: 'SubmittedDateFormatted',
                                   format: '{0:MM/dd/yyyy}',                                       
                                   title: 'Submitted Date',                                                       
                                   width: 120
                             }
                            ,{
                                field: 'SubmittedDate',
                                format: '{0:MMM dd yyyy, h:mm:ss tt zzz}',                                    
                                filterable: true,
                                title: 'Submitted Date',
                                width: 120,
                                filterable: {
                                ui: "datetimepicker"
                                }
                            }
                            ,{ field: 'Inspector', title: 'Inspector', filterable: true, width:140 }
                            ,{ field: 'CellNo', title: 'Cell No.', width:100, filterable: false }
                        ]
        }"></div>

Answer 1

I think that may be caused by wrong formatted date string in SubmittedDate. Try to use this instead:

filterable: {
            cell: {
                template: function (args) {
                    args.element.kendoDatePicker({
                        format: "MM dd yyyy, h:mm:ss tt zzz",
                        parseFormats: ["MM dd yyyy, h:mm:ss tt zzz"]
                    });
                }
            }
        }

If you have a time zone in your date string, try to convert all dates in datasource in correct format for kendo (iso 8601):

dateToLocalUTCString = function (date, isUtc) {
    var pad = function (number) {
        var r = String(number);
        if (r.length === 1) {
            r = '0' + r;
        }
        return r;
    }
    return date.getFullYear()
        + "-" + pad(date.getMonth() + 1)
        + "-" + pad(date.getDate())
        + "T" + pad(date.getHours())
        + ":" + pad(date.getMinutes())
        + ":" + pad(date.getSeconds())
        + "." + String((date.getMilliseconds() / 1000).toFixed(3)).slice(2, 5)
        + (isUtc ? "Z" : "");
};