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

Question

我有一个使用限制的 jQuery UI 日期选择器。日期选择器被初始化并使用 knockout 自定义绑定绑定到输入元素。这些日期限制由依赖于我表单中其他值的计算处理。问题是：通过设置日期选择器限制，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

通过单击 "Set restrictions" 按钮，您会看到 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");
}

另请注意 jQuery UI 在触发 onSelect 时不是很挑剔：它不会检查值是否实际更改。在更改处理程序中自己检查它可能是一个不错的功能。或者，您可以检查 before 触发更改，但您仍然需要 'fix' 单击已选择的日期时发生的更改触发器。

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

Trigger event when updating datepicker by restriction

jquery

jquery-ui

knockout.js

jquery-ui-datepicker

knockout-3.0