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 = 1544691642371）

更新：所有日期格式都是

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

Answer 1

我建议以下。

在浏览器的开发人员工具中检查端点如何返回日期。
再次检查模型字段定义。我注意到它们具有无法识别的“日期时间”类型。在JavaScript的上下文中，它们应为here所示的“日期”。

指定字段的类型。可用的选项是“字符串”， “数字”，“布尔值”，“日期”和“对象”。默认值为“字符串”。

删除列的模板，然后检查日期显示是否正确。

带有日期字段的Kendo JS网格问题

1 个答案: