javascript - 使用 Knockout.js 如何将 Date 属性绑定(bind)到 HTML5 日期选择器？

Question

(目前这仅适用于 Chrome，因为大多数浏览器尚未为输入类型 =“date”实现日期选择器)

在下面的示例中，MyDate 开始时是一个具有当前日期的 Date 对象，但它不会被日期输入(期望其格式为 YYYY/MM/DD 格式的字符串)拾取。

一旦您在选择器中选择了日期，MyDate 就会变成上述格式的字符串。

如何绑定(bind)它以便 MyDate 保持为 javascript 日期并由输入控件正确解释？

请参阅 http://jsfiddle.net/LLkC4/3/ :-

<input data-bind="value : MyDate" type="date">
<hr>   
<span data-bind="html: log" />

<script>
var viewModel = {    
    MyDate : ko.observable(new Date()),
    log : ko.observable(""),
    logDate : function () { 
            this.log(this.log() + this.MyDate() + " : " +
                     typeof(this.MyDate()) + "<br>");
                     }
};

viewModel.MyDate.subscribe(function (date) {    
    viewModel.logDate();    
});

ko.applyBindings(viewModel);

viewModel.logDate()
</script>

Answer 1

虽然 @amakhrov 的回答会奏效(如果使用像 @Stijn 所要求的可写计算可观察对象会更好)我决定使用 Custom Bindings 来做到这一点.

这样做的主要优点是可重用性 - 我只需要使用 data-bind="datePicker : MyDate" 任何我想绑定(bind)的地方。我还可以修改输入的其他属性元素，因此如果绑定(bind)到复杂的 jQuery(和其他)控件，这可能非常有用。

(Read here for more pro/cons 关于做这种事情的 3 个选择)

HTML

<input data-bind="datePicker : MyDate" type="date">

JS

ko.bindingHandlers.datePicker = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {                    
        // Register change callbacks to update the model
        // if the control changes.       
        ko.utils.registerEventHandler(element, "change", function () {            
            var value = valueAccessor();
            value(new Date(element.value));            
        });
    },
    // Update the control whenever the view model changes
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value =  valueAccessor();        
        element.value = value().toISOString();
    }
};

var viewModel = {    
    MyDate : ko.observable(new Date())
};     

ko.applyBindings(viewModel);

参见 http://jsfiddle.net/LLkC4/5/