CODEWITHSUNDEEP
javascripthtmlknockout.jsdatepickercross-browser
johannesMatevosyan
johannesMatevosyan

Reputation: 2228

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

I started to learn knockout.js and faced some issues while working with html5 form fields. When I am dealing with html5 input field elements which have text type then everything goes well, but unfortunately I cannot get and display values from html5 datepicker which type is date.

I found some examples that describe data-binding with datepickers in KnockoutJS, but they use some other sources (for example moment.js or jQuery UI) in order to achieve needed result.

Therefore could you give me any idea about binding html5 datepicker inputs with KnockoutJS without including any additional plugins and libraries, and without using computed variables?

Apart from that, I even did not find any references in KO's official documentation that explain how to work with HTML5's new input types such as color, email, url, number, range and some others. Therefore, I would highly appreciate if you could give me any hint.

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

Upvotes: 3

Views: 1594

Answers (1)

Jeroen
Jeroen

Reputation: 63810

Treat those new input types as if they were type='text', and just use the value binding. See:

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>

Upvotes: 3

Related Questions