Knockout-Kendo.js网格日期格式

Question

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

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

我指定了列类型和格式为format: "{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

您的问题不在于格式设置。它控制如何格式化要显示的值。你的问题在于价值本身。要使格式成功，该值首先需要是一个Date对象，并且现在它是一个字符串。

您可以使用映射对象(如下所示)在映射过程中创建Date对象:

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

Answer 2

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

在你的情况下，它看起来好像服务器发送"Oct 06 2015, 03:54 PM -04:00"，这实际上是Date.parse()会接受的格式之一。

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

适应你的输入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);
            }
        }
    }
});