使用 Knockout.js 如何将 Date 属性绑定到 HTML5 日期选择器? [英] Using Knockout.js how do bind a Date property to a HTML5 date picker?

问题描述

(目前这仅适用于 Chrome，因为大多数浏览器还没有为 input type="date" 实现日期选择器)

在下面的示例中，MyDate 以具有当前日期的 Date 对象开始，但是日期输入不会选择它(它期望它的格式是格式为 YYYY/MM/DD 的字符串).

在选择器中选择日期后，MyDate 将成为上述格式的字符串.

如何绑定它，使 MyDate 保持 javascript 日期并由输入控件正确解释?

见http://jsfiddle.net/LLkC4/3/ :-

<小时><span data-bind="html: log"/><脚本>var viewModel = {MyDate : ko.observable(new Date()),日志:ko.observable(""),日志日期:函数(){this.log(this.log() + this.MyDate() + " : " +typeof(this.MyDate()) + "
");}};viewModel.MyDate.subscribe(函数(日期){viewModel.logDate();});ko.applyBindings(viewModel);viewModel.logDate()

解决方案

虽然@amakhrov 的答案会起作用(如果使用像@Stijn sujested 那样的可写计算观察值会更好)我决定使用 自定义绑定.

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

(阅读此处了解更多利弊关于做这种事情的 3 种选择)

HTML

JS

ko.bindingHandlers.datePicker = {初始化:函数(元素，valueAccessor，allBindingsAccessor，viewModel){//注册更改回调以更新模型//如果控件发生变化.ko.utils.registerEventHandler(元素，改变"，函数(){var value = valueAccessor();价值(新日期(元素.价值))；});},//每当视图模型改变时更新控件更新:函数(元素，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/

(this only works in Chrome at the moment as most browsers don't yet implement date picker for input type="date")

In the following example MyDate starts out as a Date object with the current date, but this isn't picked up by the date input (which expects its format to be a string in format YYYY/MM/DD).

Once you've picked a date in the picker then MyDate becomes a string in format above.

How can you bind this so MyDate stays a javascript Date and is interpreted by the input control correctly?

See See 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>

解决方案

While @amakhrov answer will work (and would be even better if used writeable computed observable like sujested by @Stijn) I decided to do this using Custom Bindings.

The main advantage of doing this is reusability - I just have to use data-bind="datePicker : MyDate" whereever I want to tie this in. I can also modify other properties of the input element so this could be really useful if binding to complex jQuery (and other) controls.

(Read here for more pro/cons about the 3 choices to do this sort of thing)

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);

See http://jsfiddle.net/LLkC4/5/

这篇关于使用 Knockout.js 如何将 Date 属性绑定到 HTML5 日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！