jQueryUI DatePicker - 将点击事件添加到 minDate 和 maxDate 之外的日期

Question

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

当我 select 开始日期时，我将结束日期 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 之前的日期给了我一个部分范围 selector 比实际范围 selector 更适合我的需要。

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

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

遗憾的是，这些点击事件永远不会触发。我什至无法 select 检查元素 中的禁用 <td>。我调查并发现 CSS 属性 pointer-events: none; 被应用于每个残疾人 <td>。删除它允许我 select 禁用调试器中的单元格，但我永远无法触发点击事件。

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

Answer 1

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

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

请看这个例子：http://jsfiddle.net/Zrz9t/6694/

Answer 2

最后我决定不使用 min/max 日期作为范围选择器的一种形式。它太老套和凌乱了。我最终放弃了这个小部件的范围选择器方面，只使用了简单的开始日期和结束日期。

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

jQueryUI DatePicker - 将点击事件添加到 minDate 和 maxDate 之外的日期

jQueryUI DatePicker - Add click events to dates outside of minDate and maxDate

javascript

jquery

jquery-ui

datepicker

jquery-ui-datepicker