javascript - Knockout-Kendo.js 网格 UI：datepicker 过滤器

Question

我正在使用Knockout-Kendo.js集成库，我正在尝试让 datepicker 过滤器正常工作。但是，每当我将 filterable: {ui: "datetimepicker" } 添加到我的配置中时，页面上都不会显示任何内容，也没有脚本错误。

我的 kendoGrid 配置看起来像（这里在 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

我认为这可能是由于SubmittedDate. 尝试改用这个：

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"]
                    });
                }
            }
        }

如果您的日期字符串中有时区，请尝试将所有日期转换datasource为正确格式的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" : "");
};