如何使用Knockout.js绑定HTML5日期选择器和其他输入类型

How to bind HTML5 datepicker and other input types using Knockout.js?

本文关键字：选择器 其他 输入 类型 日期 HTML5 何使用 Knockout js 绑定      更新时间：2023-09-26

我开始学习knockout.js，在使用html5表单字段时遇到了一些问题。当我处理html5输入字段元素的文本类型，然后一切顺利，但不幸的是，我不能得到和显示值从html5 datepicker哪一种类型是日期。

我发现了一些在KnockoutJS中描述数据绑定与日期拾取器的例子，但他们使用一些其他来源(例如moment.js或jQuery UI)来实现所需的结果。

因此，你能给我任何关于绑定html5日期picker输入与KnockoutJS不包括任何额外的插件和库，而不使用计算变量的想法吗?

除此之外，我甚至没有在KO的官方文档中找到任何参考资料来解释如何使用HTML5的新输入类型，如颜色，电子邮件，url，数字，范围等。因此，如果您能给我一些提示，我将非常感激。

<h2>Set date</h2>
<!--input type "text" works well and the result is visible below whereas other input types are problematic-->
<input type="text" data-bind="value: addStart" /><br> 
From <input  type="date" data-bind="date: addStartDate" /> 
To <input type="date" data-bind="date: addEndDate" />
<input  type="color" data-bind="date: addColor" /> 
<input type="email" data-bind="date: addEmail" />
<input type="url" data-bind="date: addUrl" />
<input type="number" data-bind="date: addNumber" />
<input type="range" data-bind="date: addRange" />
<h2>Display date</h2>   
<strong data-bind="text: addStart" ></strong><br> 
<strong data-bind="text: timeLine" ></strong><br> 
<strong  type="color" data-bind="date: addColor"></strong> <br> 
<strong type="email" data-bind="date: addEmail"></strong><br> 
<strong type="url" data-bind="date: addUrl"></strong><br> 
<strong type="number" data-bind="date: addNumber"></strong><br> 
<strong type="range" data-bind="date: addRange"></strong><br>

var ViewModel = function() {
    var self = this;
    self.addStart = ko.observable();       
    self.addStartDate = ko.observable();  // date
    self.addEndDate = ko.observable();    // date
    self.addColor = ko.observable();    // Color
    self.addEmail = ko.observable();    // Email
    self.addUrl = ko.observable();      // Url
    self.addNumber = ko.observable();   // Number
    self.addRange = ko.observable();    // Number
};
// Activates knockout.js
ko.applyBindings(new ViewModel());

将这些新的input类型视为type='text'，并仅使用value绑定。看到:

ko.applyBindings({ val1: ko.observable(), val2: ko.observable(), val3: ko.observable() });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
Date: <input type="date" data-bind="value: val1" />
<hr />
Color: <input type="color" data-bind="value: val2" />
<hr />
Email: <input type="email" data-bind="textInput: val3" />
<hr />
Etc.
<hr />
Confirm that view model actually changes / debug info:
<pre data-bind="text: ko.toJSON($root)"></pre>

相关文章：