check the date and if it is less than a month from today display some content using Knockout.js

Question

I have an input field that asks user to pick a date and if the date is less than 30 days form today it will display some other contents. I am using jQueryUI datapicker and knockout.js for data binding and here is what I have so far JSFiddle but it's not working. What am I missing?

$(document).ready(function() {
  $("#datepicker").datepicker();
});

$(document).ready(function() {

  var viewModel = function() {
    var self = this;
    self.request_due_date = ko.observable();
    self.request_due_date_rush = ko.observable(false);
    self.request_due_date_rush_reason = ko.observable();

    self.request_due_date.subscribe(function(dd) {
      var cur = new Date(),
        rush_date = cur.setDate(cur.getDate() + 30);
      if (dd < rush_date) {
        self.request_due_date_rush(true);
      }
    });
  };
  ko.applyBindings(new viewModel());
});

<div>Due Date:
  <input id="datepicker" data-bind="text: request_due_date" type="text" />
</div>
<div data-bind="visible: request_due_date_rush">Reason For Rush:
  <input data-bind="text: request_due_date_rush_reason" />
</div>

Max Brodin · Answer 1 · 2015-03-11T21:13:46.820

0

You need to bind value, not text.

<input id="datepicker" data-bind="value: request_due_date" type="text" />

Also the value dd is a string and must be parsed to date, for example using moment.js

var days = moment().diff(moment(dd, "MM/DD/YYYY"), "days");

See updated fiddle

edited Mar 11 '15 at 21:13

answered Mar 11 '15 at 19:44

Max Brodin

3,903
1
14
23

if you change the condition to (days < 30 ) it will work but not correctly. It updates the DOM for pretty much any date – Saeed Abbaspour Mar 11 '15 at 20:55
@Saeed You are right, the mistake was in days count and date format. updated fiddle – Max Brodin Mar 11 '15 at 21:13
I think I figured it out (with your help). I posted my solution as an answer. – Saeed Abbaspour Mar 11 '15 at 21:51

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

it's because when you create the datepicker object, the underlying input element gets moved around in the DOM, breaking the binding. Consider writing your own binding handler, like seen here: jQuery UI datepicker change event not caught by KnockoutJS

edited May 23 '17 at 12:06

Community

1
1

answered Mar 11 '15 at 19:45

dfperry

2,258
1
14
22

score 0 · Answer 3 · edited May 23 '17 at 12:06

Thanks to @MaxBrodin for the insight (to bind value, not text) and this post I found the following solution to be working. Here is also the updated Fiddle

$(document).ready(function() {
  $("#datepicker").datepicker();
});

$(document).ready(function() {

  var viewModel = function() {
    var self = this;
    self.request_due_date = ko.observable();
    self.request_due_date_rush = ko.observable(false);
    self.request_due_date_rush_reason = ko.observable();

    self.request_due_date.subscribe(function(dd) {
      var date1 = new Date(dd);
      var date2 = new Date();
      var timeDiff = Math.abs(date2.getTime() - date1.getTime());
      var days = Math.ceil(timeDiff / (1000 * 3600 * 24));

      self.request_due_date_rush(days < 30);
    });
  };
  ko.applyBindings(new viewModel());
});

<div>Due Date:
  <input id="datepicker" data-bind="value: request_due_date" type="text" />
</div>
<div data-bind="visible: request_due_date_rush">Reason For Rush:
  <input data-bind="text: request_due_date_rush_reason" />
</div>

check the date and if it is less than a month from today display some content using Knockout.js

3 Answers3