如何格式化Json日期并将其绑定到DatePicker控件

时间:2015-11-17 06:26:10

标签: javascript json knockout.js datepicker momentjs

我在json中有数据数组:

[{"AccountStatementID": 2,"CompanyID": 1,"Description": "test","Amount": 1000,"ReceiptDate": "/Date(1447261200000)/","Type": "Payment"}];

我已成功将数据加载到表格中,并以正确的格式(dd/MM/yyyy)显示ReceiptDate。当我单击编辑按钮时,DatePicker控件中的ReceiptDate仍为/Date(1447261200000)/

我已按以下方式使用momentjs格式化:

ReceiptDate: moment(self.ReceiptDate).format('DD/MM/YYYY')

此外,日期选择器不会出现。

为什么ReceiptDate没有格式化,如何解决它并调出datepicker?

以下是jsfiddle中的演示。

2 个答案:

答案 0 :(得分:0)

我看到您已将日期选择器设置为只读。这就是当点击时没有出现日期选择器的原因。

我修改了你的小提琴中的一些细节,最后得到了这个 jsfiddle

一个是在您的数据中保存Javascript日期时间对象,因为您正在调用它并格式化它。

var data = [
  {
    "AccountStatementID": 2,
    "CompanyID": 1,
    "Description": "test",
    "Amount": 1000,
    "ReceiptDate": new Date(1447261200000),
    "Type": "Payment"
  }
];

我无法弄清楚你在编辑时设置日期的位置。所以调用moment()。format()会在编辑时获得所需的格式。 (如果需要,在编辑时删除只读的日期)。

答案 1 :(得分:0)

foreach循环遍历AccountStatements,其中填充了原始数据:

var data = [
    {
        "AccountStatementID": 2,
        "CompanyID": 1,
        "Description": "test",
        "Amount": 1000,
        "ReceiptDate": "/Date(1447261200000)/",
        "Type": "Payment"
    }
];

...

self.AccountStatements = ko.observableArray(data);

当您单击编辑时,会发送一条原始数据的记录,该记录将发送到编辑功能,并将其设置为$root.AccountStatement的值:

    self.AccountStatement(accountStatement);

所以你的编辑只是处理原始数据。在此过程中的某个时刻,您需要将原始数据转换为您为单个私有变量创建的内容

var AccountStatement

我建议您创建一个获取原始数据记录并返回该表单内容的函数。在分配self.AccountStatements之前使用它来转换输入数组。