Knockout-Kendo.js 网格日期格式

Question

我正在使用 Knockout.js 与 Kendo UI 网格 (http://rniemeyer.github.io/knockout-kendo/web/Grid.html) 的集成。

在我的 JSON 中，我返回的日期显示为 Oct 06 2015, 03:54 PM -04:00。

我已将列类型和格式指定为格式："{0:MM/dd/yyyy HH:mm tt}"，但它似乎被完全忽略了。

以下是kendogrid绑定定义：

<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'},
        }
      }
    }
  },
  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',
      title: 'No.',
      width: 70,
    }
    ,{ field: 'FormName', title: 'Form', width:120 }
    ,{ field: 'IdVersion', title: 'Id/Version', width:100}
    ,{
      field: 'SubmittedDate',
      filterable: true,
      title: 'Submitted Date',
      format: '{0:MM/dd/yyyy HH:mm tt}',
      width: 120
    }
    ,{ field: 'Inspector', title: 'Inspector', filterable: true, width:140 }
    ,{ field: 'CellNo', title: 'Cell No.', width:100, filterable: false }
  ]
}"></div>

Answer 1

您的问题不在于 format setting。这控制如何格式化显示的值。您的问题在于价值本身。要使格式成功，该值必须是 Date 对象开头，现在是一个字符串。

您可以在映射过程中使用映射对象（如图here）创建一个Date对象：

var mapping = {
  SubmittedDate: {
    create: function(options) {
              return new Date(options.data);
    }
};
ko.mapping.fromJS(data, mapping, this);

Answer 2

根本问题是 JSON 规范没有定义日期数据类型。由于没有标准，各种字符串格式都被用来表示 JSON 文档中的日期。然而，Kendo 网格需要 Date 个对象，而不是字符串。

在您的情况下，服务器似乎发送了 "Oct 06 2015, 03:54 PM -04:00"，这实际上是 Date.parse() 可以接受的格式之一。

JavaScript's JSON.parse() function 通过接受 reviver 函数来减轻标准中的这种遗漏，该函数可以根据您的规则转换 JSON 中的任何特殊值。这通常用于 "revive" 日期。

适应您的输入JSON:

function reviveDates(key, val) {
    if ( key === "SubmittedDate" ) {
        return new Date(val);
    }
    return val;
}

和

JSON.parse(yourJSON, reviveDates);

为了更方便，您实际上可以将其集成到 jQuery 的低级 Ajax 例程中，这样您就不必在更高级别处理日期转换:

$.ajaxSetup({
    converters: {
        'text json': function (data) {
            try {
                return JSON.parse(data, reviveDates);
            } catch (ex) {
                $.error("Invalid JSON: " + data);
            }
        }
    }
});

Knockout-Kendo.js 网格日期格式

Knockout-Kendo.js Grid date formatting

knockout.js

kendo-grid

knockout-kendo