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

Question

I am using 2 jQueryUI DatePickers to select a start and end date. My requirements are that I must specify a start and end date separately, rather than selecting a date range on a single calendar.

When I select the start date, I set the minDate of the end date to be equal to it. Vice versa with the end date.

$('.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 });
   }
}

The disabling of the dates before the minDate and maxDate gives me a partial range selector that suits my needs better than an actual range selector.

However, I want the user to be able to click dates before the minDate and for it to reset the min / maxDate on both DatePickers. I tried to achieve this by adding a click event to the disabled cells in the calendar:

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

Unfortunately, these click events never trigger. I couldn't even select the disabled <td> s in inspect element . I investigated and found the CSS property pointer-events: none; was being applied to each of the disabled <td> s. Removing that allowed me to select disabled cells in the debugger, but I could never get the click events to fire.

Can someone assist me with this? If I can get the events to fire when a user clicks a disabled date I can do it.

Answer 1

Your idea of adding a trigger on the disabled item should work. My guess is you're defining it before the datepicker.

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

Please see this example: http://jsfiddle.net/Zrz9t/6694/

Answer 2

In the end I decided against using the min/max date as a form of range picker. It was too hacky and messy. I ended up forgoing the range picker aspect of this little widget and just went with plain start date and end date.

@user1477388 - that code is very similar to what I tried and it still did not detect a click event.