Question

我有一个带有多个对话框的单页面应用程序，由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并给我一些指示吗？

Answer 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）

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

1 个答案: