检查日期，如果离今天不到一个月，则使用Knockout.js显示一些内容

Question

我有一个输入字段，要求用户选择一个日期，如果日期不到30天的形式今天，它将显示一些其他内容。我正在使用jQueryUI datapicker和knockout.js进行数据绑定，这是到目前为止我所拥有的JSFiddle，但它不起作用。我遗漏了什么？

​

$(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>

​

Answer 1

您需要绑定value，而不是text。

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

此外，值dd是一个字符串，必须解析到最新，例如使用moment.js

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

请参阅updated fiddle

Answer 2

这是因为当您创建datepicker对象时，底层的输入元素会在DOM中来回移动，从而破坏绑定。考虑编写您自己的绑定处理程序，如下所示：jQuery UI datepicker change event not caught by KnockoutJS

Answer 3

感谢@MaxBrodin的洞察力(绑定value，而不是text)和this post，我发现以下解决方案是有效的。这也是更新后的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>

​