通过限制更新日期选择器时触发事件

Question

我有一个使用限制的 jQuery UI 日期选择器。日期选择器被初始化并使用敲除自定义绑定绑定到输入元素。这些日期限制由依赖于我表单中其他值的计算来处理。问题是：通过设置日期选择器限制，DOM 更新（可见）到另一个值。但是，在该元素上注册的更改事件不会触发。我很想赶上这个事件，所以我可以相应地更新我的 observable。

ko.utils.registerEventHandler(element, 'change', function() {
    console.log('this should fire when clicking the Set restrictions-button');
    var observable = valueAccessor();
    var value = $(element).datepicker('getDate');
    observable(value);
});

我创建了一支笔来说明问题：http://codepen.io/Egidius/pen/XdyazR?editors=1011

通过单击“设置限制”按钮，您可以看到 DOM 中的日期发生变化。但是，该事件不会由该突变触发。

Answer 1

由于新的限制，jQuery UI 日期选择器在更改其值后不会触发更改。您可以通过在您的 setRestrictions 方法中添加 .trigger("change") 或 .change() 来强制它这样做：

this.setRestrictions = function() {
   var minDate = new Date();
   minDate.setDate(minDate.getDate() + 5);
   $("input[name='date']")
     .datepicker('option', 'minDate', minDate)
     .trigger("change");
}

还请注意，触发onSelect 时，jQuery UI 不是很挑剔：它不会检查值是否实际更改。在更改处理程序中自己检查这可能是一个不错的功能。或者，您可以在触发更改之前检查，但您仍然必须“修复”单击已选择日期时发生的更改触发器。