jQueryUI DatePicker - добавляет события кликов к датам вне minDate и maxDate - PullRequest
Новая
       13

jQueryUI DatePicker - добавляет события кликов к датам вне minDate и maxDate

0 голосов
/ 08 января 2019

Я использую 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 дает мне селектор неполного диапазона, который лучше соответствует моим потребностям, чем фактический селектор диапазона.

enter image description here

Однако я хочу, чтобы пользователь мог щелкнуть даты до 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);
});

К сожалению, эти события щелчка никогда не срабатывают. Я даже не смог выбрать отключенные <td> s в inspect element . Я исследовал и обнаружил, что свойство CSS pointer-events: none; применяется к каждому из отключенных <td> s. Удаление этого позволило мне выбрать отключенные ячейки в отладчике, но я так и не смог запустить события щелчка.

Может ли кто-нибудь помочь мне с этим? Если я могу заставить события срабатывать, когда пользователь нажимает на отключенную дату, я могу это сделать.

Ответы [ 2 ]

0 голосов
/ 24 января 2019

В конце концов я решил не использовать минимальную / максимальную дату в качестве формы выбора диапазона. Это было слишком хакерским и грязным. Я закончил тем, что отказался от аспекта выбора диапазона этого маленького виджета, и просто указал простые даты начала и окончания.

@ user1477388 - этот код очень похож на тот, который я пробовал, и он все еще не обнаружил событие щелчка.

0 голосов
/ 08 января 2019

Ваша идея добавить триггер на отключенный элемент должна работать. Я предполагаю, что вы определяете это до выбора даты. 

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

Пожалуйста, посмотрите этот пример: http://jsfiddle.net/Zrz9t/6694/

...