数据绑定到预先格式化的日期字段答案

【问题标题】：Data bind to pre-formatted date field数据绑定到预先格式化的日期字段
【发布时间】：2014-05-01 20:55:25
【问题描述】：

我有一个带有多个对话框的单页应用程序，由 Knockout 视图模型支持（每个对话框有一个 observable）。

<form id='first-dialog' data-bind='with: firstDialogModel'>
    <input data-bind='value: Name'></input>
    <input data-bind='value: SomeDate'></input>
    ...
</form>

还有 JS：

var vm = {
    firstDialogModel: ko.observable(),
    secondDialogModel: ko.observable(),
    thirdDialogModel: ko.observable()
};

ko.applyBindings(vm);

如您所料，加载和保存是通过 AJAX 调用完成的，而且简单的绑定似乎没问题。但是，我想将其中一个字段格式化为用户的 dd/MM/yyyy 日期，然后将任何更改保存回数据库作为常规 ISO 格式的日期，即 yyyy-MM-dd

我尝试了多种方法（计算字段、自定义数据绑定等），但目前卡住了。有人可以查看this jsfiddle 并请给我一些指点吗？

【问题讨论】：

总是在问题中包含相关的代码和标记in，而不仅仅是一个小提琴。小提琴是一个很好的辅助，而不是一个独立的问题和minimal replicating test case的替代品。
您是否考虑过使用 momentJs 来格式化您的日期？ stackoverflow.com/questions/16343747/…
“给我一些指点”相当宽泛。您可以在 CodeReview.SE 上尝试（不过请务必阅读他们的常见问题解答）。此外，请务必在您的问题中也包含所有相关代码，而不仅仅是在小提琴中（链接可能会腐烂，使未来的访问者难以理解该问题）。

标签： javascript jquery date data-binding knockout.js

【解决方案1】：

希望这可以帮助您入门 (see this fiddle)，但它确实使用了 Moment.js。我要给出的第一个建议是使用 Moment.js 进行任何和所有客户端日期/时间处理，因为它非常出色。

以下是我如何更改您的自定义绑定：

ko.bindingHandlers.dateEdit = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var observable = valueAccessor();
        var initialDate = ko.unwrap(observable);

        if (moment(initialDate).isValid()) {
            $(element).val(moment(initialDate).format('YYYY-MM-DD'));
        }

    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var observable = valueAccessor();
        var initialDate = ko.unwrap(observable);

        if (moment(initialDate).isValid()) {
            $(element).val(moment(initialDate).format('YYYY-MM-DD'));
        }
    }
};

请注意，由于您将input 与type="date" 一起使用，日期格式必须为'YYYY-MM-DD' 才能使其值显示在input 元素中（请参阅this SO question）

【讨论】：