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

【问题标题】：jQueryUI DatePicker - Add click events to dates outside of minDate and maxDatejQueryUI DatePicker - 将点击事件添加到 minDate 和 maxDate 之外的日期
【发布时间】：2019-06-03 11:20:16
【问题描述】：

我正在使用 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。我试图通过向日历中禁用的单元格添加点击事件来实现这一点：

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

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

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

【问题讨论】：

我们很清楚，您想设置最小/最大日期，但允许用户选择最小/最大范围之外的日期？这正是 not 设置最小/最大日期。我认为你需要重新考虑你的实施......你能更清楚一点：你的规格吗？ “但是，我希望用户能够单击 minDate 之前的日期并让它在两个 DatePickers 上重置 min/maxDate”令人困惑
@LeroyStav 是的，这是一个 hacky 解决方案，使用最小/最大日期作为有效范围选择器中的开始和结束日期。我这样做是因为 jQuery UI 的 DatePicker 的现有范围选择器并没有特别好地完成这项工作。我用这个解决方案抓住了稻草，最后我放弃了 rangepicker 方面，只是有了简单的开始/结束日期；更简单，更少hacky，但对用户来说不是那么好。

标签： javascript jquery jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：