Knockout-Kendo.js网格用户界面：日期选择器过滤器

Question

我正在使用Knockout-Kendo.js集成库 我想让datepicker过滤器工作。然而，每当我添加可筛选的：{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" : ""); 
};