Kendo JS网格问题与日期字段

Question

我们在生产站点中遇到了Kendo UI网格的奇怪问题。

对于一些用户来说，日期字段在Google chrome中显示为null，在私人窗口和IE、MSEdge等其他浏览器中运行良好。我们无法复制问题

代码如下。当将网格导出到Excel时，所提交的日期导出良好，但在显示时显示为空

var dataSource = new kendo.data.DataSource({
type: "odata-v4",
transport: {
read: {
url: api + "/api/odata/Orders",
dataType: "json"
},
parameterMap: function (options, type) {
var paramMap = kendo.data.transports["odata-v4"].parameterMap.call(this, options, type);
delete paramMap.$inlinecount;
delete paramMap.$format;
return paramMap;
}
},
schema: {
data: function (data) {
return data.value;
},
total: function (data) {
return data["@odata.count"];
},
model: {
fields: {
LINE_ID: { type: "string" },
REQUESTED_DATE: { type: "datetime" },
SCHEDULE_SHIP_DATE: { type: "datetime" },
ACTUAL_SHIPMENT_DATE: { type: "datetime" },
INVOICE_DATE: { type: "datetime" },
INVOICE_NUMBER: { type: "string" },
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
sort: {
field: "REQUESTED_DATE",
dir: "desc"
}
});
$("#grid").kendoGrid({
toolbar: [
{ template: "<a role='button' class='k-button k-button-icontext k-grid-excel'><i class='fa fa-file-excel-o'></i> <span data-i18n='excel-export'>Excel Export</span></a>" },
{ template: "<input type='search' id='searchbox' class='k-input pull-right-not-xs' placeholder='Search...'  data-i18n='[placeholder]search'>" }
],
excel: {
fileName: "Orderdetails.xlsx",
allPages: true,
filterable: true
},
dataSource: dataSource,
height: 480,
autoBind: false,
filterable: true,
selectable: "row",
sortable: true,
reorderable: true,
resizable: true,
columnHide: onColumnChange,
columnShow: onColumnChange,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columnMenu: true,
columns: [
{ field: "LINE_ID", width: 150, hidden: true, title: i18next.t("id") },
{
columns:
[
{ field: "REQUESTED_DATE", template: "#if(REQUESTED_DATE != null){# #=kendo.toString(kendo.parseDate(REQUESTED_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", minScreenWidth: 1200, width: 120, title: i18next.t("requested") },
{ field: "SCHEDULE_SHIP_DATE", template: "#if(SCHEDULE_SHIP_DATE != null){# #=kendo.toString(kendo.parseDate(SCHEDULE_SHIP_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", minScreenWidth: 500, width: 120, title: i18next.t("scheduled") },
{ field: "ACTUAL_SHIPMENT_DATE", template: "#if(ACTUAL_SHIPMENT_DATE != null){# #=kendo.toString(kendo.parseDate(ACTUAL_SHIPMENT_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", hidden: true, title: i18next.t("actual") },
],
minScreenWidth: 1000,
title: i18next.t("shipment-date")
},
{ field: "INVOICE_DATE", template: "#if(INVOICE_DATE != null){# #=kendo.toString(kendo.parseDate(INVOICE_DATE, 'yyyy-MM-dd'), 'MMM d, yyyy')#  #}#", hidden: true, width: 150, title: i18next.t("invoice-date") },
{ field: "INVOICE_NUMBER", hidden: true, width: 150, title: i18next.t("invoice-number") }
]
});

我们还注意到，当我们清除浏览器历史记录和cookie时，它运行良好。此外，我们正在加载附加日期时间刻度的JS文件，即

(//js/orders.js？v=1546691642371(

更新：所有日期格式均为

2019-04-17T08:05:00-07:00
2018-11-22T08:05:22-08:00

Answer 1

我建议如下。

1. 在浏览器的开发工具中查看从端点返回的日期
2. 仔细检查模型字段定义。我注意到他们有一种无法识别的"约会时间"。在JavaScript的上下文中，它们应该是此处所述的"日期">

指定字段的类型。可用选项为"字符串"，"number"、"boolean"、"date"one_answers"object"。默认值为"字符串"。

3. 删除列的模板并检查日期显示是否正确