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

【问题标题】：How to Format Json Date and Bind it to The DatePicker Control如何格式化 Json 日期并将其绑定到 DatePicker 控件
【发布时间】：2016-02-18 10:36:24
【问题描述】：

我在 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没有格式化，如何解决并调出日期选择器？

这是jsfiddle中的演示。

【问题讨论】：

标签： javascript json knockout.js datepicker momentjs

【解决方案1】：

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

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

由于您正在调用时刻并对其进行格式化，因此正在将 Javascript 日期时间对象保存在您的数据中。

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

我无法弄清楚您在编辑时将日期设置在哪里。所以调用 moment().format() 也会在编辑时为您提供所需的格式。（如果需要，在编辑时删除只读到日期）。

【讨论】：

我设置为只读，因为我想从（日历）日期选择器中获取日期值。如果单击添加链接，然后单击收据日期文本框，它将显示日历。从您提供的链接中，日历仍然没有出现
我没有删除只读以更新现有数据。点击“添加新的对帐单”，然后点击输入收据日期。

【解决方案2】：

您的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 之前使用它来转换您的输入数组。

【讨论】：