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

How to Format Json Date and Bind it to The DatePicker Control

本文关键字:绑定 DatePicker 控件 格式化 Json 日期      更新时间:2023-09-26

我有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中的演示。

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

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

一个是将Javascript日期-时间对象保存在您的数据中,因为您正在调用moment并对其进行格式化

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

我不知道你在编辑时把日期定在哪里了。因此,调用moment().format()将在编辑时获得所需的格式。(如果需要,在编辑时删除只读到最新)。

您的foreachAccountStatements上循环,用原始数据填充:

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