问题
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>
回答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" : "");
};
来源:https://stackoverflow.com/questions/32994344/knockout-kendo-js-grid-uidatepicker-filter