Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

3 个答案: