Question

我正在使用Knockout.js与Kendo UI Grid（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规范没有定义Date数据类型。由于没有标准，因此使用各种字符串格式来表示JSON文档中的日期。然而，Kendo Grid需要Date个对象，而不是字符串。

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

JavaScript's JSON.parse() function通过接受 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);
            }
        }
    }
});

Knockout-Kendo.js网格日期格式

2 个答案: