【发布时间】：2016-02-14 17:16:03
【问题描述】：
第一次加载页面时，我使用 ajax 来获取 AccountStatements 数据。
function AccountStatementViewModel(companyID) {
var self = this;
...
var AccountStatement = {
AccountStatementID: self.AccountStatementID,
CompanyID: self.CompanyID,
Description: self.Description,
Amount: self.Amount,
ReceiptDate: self.ReceiptDate,
Type: self.Type
}
self.AccountStatement = ko.observable();
self.AccountStatements = ko.observableArray();
$.ajax({
url: webroot + 'AccountStatement/GetAccountStatements',
contentType: 'application/json; charset=utf-8',
data: { id: self.CompanyID },
cache: false
}).done(function (data) {
self.AccountStatements(data);
});
...
self.edit = function (accountStatement) {
$('#lnkAddAccountStatement').hide('blind', 1000);
$('#pnlAddEditAccountStatement').show('blind', 1000);
self.AccountStatement(accountStatement);
}
...
}
Controller 以 json 格式返回结果：
public JsonResult GetAccountStatements(int id)
{
var accountStatementsVM = db.AccountStatements
.Where(a => a.CompanyID == id)
.Select(a => new AccountStatementViewModel
{
AccountStatementID = a.AccountStatementID,
CompanyID = a.CompanyID,
Description = a.Description,
Amount = a.Amount,
ReceiptDate = a.ReceiptDate,
Type = a.Type
})
.ToList();
return Json(accountStatementsVM, JsonRequestBehavior.AllowGet);
}
结果是：
[{"AccountStatementID":2,"CompanyID":1,"Description":"test","Amount":1000,"ReceiptDate":"/Date(1447261200000)/","Type":"Payment"}]
在视图中，我使用以下代码显示它：
<tbody data-bind="foreach: AccountStatements, visible: AccountStatements().length > 0">
<tr>
<td data-bind="attr: { id: AccountStatementID }">
<a href="#" class="btn btn-primary btn-xs" data-bind="click: $root.edit"><i class="glyphicon glyphicon-pencil"></i></a>
<a href="#" class="btn btn-danger btn-xs" data-bind="click: $root.delete"><i class="glyphicon glyphicon-remove"></i></a>
</td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
<td data-bind="date: ReceiptDate"></td>
</tr>
</tbody>
这是格式化日期的代码：
ko.bindingHandlers.date = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor());
var textContent = moment(valueUnwrapped).format("DD/MM/YYYY");
ko.bindingHandlers.text.update(element, function () { return textContent; });
}
};
在这一步，日期以正确的格式显示，然后如果我点击编辑按钮，文本框中的 ReceiptDate 没有被格式化。
ReceiptDate 文本框代码：
<input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="value: AccountStatement().ReceiptDate" />
如果我更改为data-bind="date: AccountStatement().ReceiptDate"，文本框将为空。
如何格式化文本框中的日期？
更新
我已经像 link 一样更改了日期绑定处理程序，但 ReceiptDate 的 TextBox 值仍然是 /Date(1447261200000)/
视图的变化：
<input type="text" placeholder="Enter Receipt Date" class="form-control fdatepicker" readonly="readonly" data-bind="date: AccountStatement().ReceiptDate" />
表格中的收货日期为空：
<td data-bind="date: ReceiptDate"></td>
【问题讨论】：
-
类似 jsfiddle.net/LkqTU/27696 的东西。欢呼
-
@supercool 感谢您的链接，但它不起作用。在上面的链接中，您使用了通用日期格式 (dd/mm/yyyy)，而在我的情况下，日期值是 json 日期格式
/Date(1447261200000)/。我已经编辑了我的问题以提供更多信息。 -
尝试设置
self.ReceiptDate=ko.observable(1447261200000);并检查它，它仍然可以工作。时刻将解码为您指定的日期和格式。 -
哇，这些是您所做的一些重大修改。据我所知，我已删除我的答案，因为编辑使其无效。
-
@supercool 是的，它仍然可以工作jsfiddle.net/LkqTU/27697，但在我的代码中它不起作用。您能看到问题中的更新部分吗？
标签： javascript knockout.js momentjs