Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Knockout.js input type date data binding in Google Chrome

I'm struggling to set a value on the input of type="date" in google chrome: http://jsfiddle.net/ruslans/gNv7H/

<input data-bind="value: dateString" type="date"></input>

var viewModel = {
    someDate: new Date(parseInt("/Date(1367708400000)/".substr(6)))
};
ko.applyBindings(viewModel);

My date will come from JSON data but first I need to find out which format does it need to be in for Chrome's date picker to recognize the binding. Would I have to do it with jQuery selector and set .val() on the field? Seems daft...

Edit: according to this article, the date format to set the value on Google date input must always be "yyyy-mm-dd". Which is a pitty, because we're using jQuery date picker for all browsers where there's no native date pickers exist.

like image 265
Ruslan Avatar asked May 10 '13 10:05

Ruslan


People also ask

What is data bind in knockout JS?

Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy and obvious to bind to simple data properties or to use a single binding.

How do you input a date into type?

The <input type="date"> defines a date picker. The resulting value includes the year, month, and day.

Which input element is used for accepting the date in YYYY MM?

<input type="date"> <input> elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time.


1 Answers

You just need to correctly format your value as described in the W3C working draft:

A valid full-date as defined in RFC 3339, with the additional qualification that the year component is four or more digits representing a number greater than 0.

Example: 1996-12-19

So the following should work:

var viewModel = {    
    dateString: ko.observable('2002-02-02')
};

Demo JSFiddle.

like image 188
nemesv Avatar answered Nov 15 '22 14:11

nemesv