我正在使用Knockout-Kendo.js集成库 我试图让datepicker过滤器工作。但是,每当我向我的配置添加filterable:{ui:“datetimepicker”}时,页面上都不显示任何内容,也没有脚本错误。
我的kendoGrid配置看起来像(这里有SubmittedDate上的filterable属性)
<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>
答案 0 :(得分:0)
我认为这可能是由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
(iso 8601
)的正确格式转换kendo
中的所有日期:
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" : "");
};