CODEWITHSUNDEEP
javascripthtmlgoogle-chromeknockout.js
Ruslan
Ruslan

Reputation: 10147

Knockout observable subscribe doesn't recognize a change with date input in google Chrome

Weird issue with Knockout.js whereas it won't recognize the date has been selected after reset, but only with the same date.

To replicate in my jsFiddle: http://jsfiddle.net/V5JCq/ follow these steps:

  1. pick any date
  2. cllick reset
  3. pick the same date you've picked in step 1

how? what? why?

code:

<input type="button" data-bind="click: resetDate" value="Reset">
<input data-bind="value : EstimatedDeliveryDate" type="date">
<span data-bind="html: selectedDate" />

var viewModel = {
    EstimatedDeliveryDate: ko.observable(),
    selectedDate: ko.observable()
};

viewModel.EstimatedDeliveryDate.subscribe(function (date) {
    viewModel.selectedDate("Date selected: " + date);
});

viewModel.resetDate = function () {
    viewModel.EstimatedDeliveryDate("");
};

ko.applyBindings(viewModel);

N.B.: the issue is only applicable to Google Chrome v20+ which comes with built-in date picker for html5 date input control. Hence the tags.

Upvotes: 2

Views: 1328

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

Not sure why, but it does not seem to be firing a change event in that scenario. An easy fix is to specify that you want to listen to the input event as well using the valueUpdate additional binding like:

<input data-bind="value : EstimatedDeliveryDate, valueUpdate: 'input'" id="EstimatedDeliveryDate" name="EstimatedDeliveryDate" type="date"><span data-bind="html: selectedDate" />

http://jsfiddle.net/rniemeyer/geggJ/

Upvotes: 3

Related Questions