(目前这仅适用于 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>
最佳答案
虽然 @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);
关于javascript - 使用 Knockout.js 如何将 Date 属性绑定(bind)到 HTML5 日期选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18016718/