jQueryUI DatePicker-将点击事件添加到minDate和maxDate

Question

我正在使用2个jQueryUI DatePickers选择开始日期和结束日期。我的要求是我必须分别指定开始日期和结束日期，而不是在单个日历上选择日期范围。

当我选择开始日期时，将结束日期的minDate设置为与其相等。反之亦然，结束日期。

$('.datepicker').datepicker({
   beforeShowDay: $.datepicker.noWeekends,
   dateFormat: 'DD dd-mm-yy',
   onSelect: function () {
      SetMinMaxValuesOfDatePickers();
   }
});

static SetMinMaxValuesOfDatePickers() {
   let newMinDate = $('#start-date').datepicker('getDate');
   let newMaxDate = $('#end-date').datepicker('getDate');

   if (newMinDate != null) {
      $('#end-date').datepicker('change', { minDate: newMinDate });
   }
   if (newMaxDate != null) {
      $('#start-date').datepicker('change', { maxDate: newMaxDate });
   }
}

禁用minDate和maxDate之前的日期给了我一个部分范围选择器，它比实际范围选择器更适合我的需求。

但是，我希望用户能够在minDate之前之前单击日期，并使其在两个DatePickers上重置min / maxDate。我试图通过向日历中的禁用单元格添加click事件来实现这一点：

$('.ui-state-disabled').on('click', function () {
   alert("This doesn't appear!");
   $("#start-date").datepicker("option", "minDate", null);
   $("#end-date").datepicker("option", "minDate", null);
});

不幸的是，这些点击事件永远不会触发。我什至无法在检查元素中选择禁用的<td>。我进行了调查，发现CSS属性pointer-events: none;被应用于每个禁用的<td>。删除该代码后，我可以在调试器中选择禁用的单元，但是我无法触发点击事件。

有人可以帮助我吗？如果我可以在用户单击禁用日期时触发事件，那么就可以做到。

Answer 1

您在禁用项上添加触发器的想法应该可以起作用。我的猜测是您要在日期选择器之前定义它。

$('.ui-datepicker-unselectable.ui-state-disabled').click(function() {
    alert('invalid date selected');
});

请参见以下示例：http://jsfiddle.net/Zrz9t/6694/

Answer 2

最后，我决定不使用最小/最大日期作为范围选择器。太杂乱无章了。我最终放弃了这个小部件的范围选择器方面，只使用了简单的开始日期和结束日期。

@ user1477388-该代码与我尝试的代码非常相似，但仍未检测到点击事件。