Функция обратного вызова при нажатии на "выбранную дату" в указателе даты

Question

Используя последнюю версию Daterangepicker для начальной загрузки

Для следующего календаря (стандартный пример используется на их сайте):

$('#demo').daterangepicker({
    "singleDatePicker": true,
    "autoApply": true,
    "startDate": "05/31/2017",
    "endDate": "06/06/2017"
}, function(start, end, label) {
  console.log("a date is selected")
});

Данная функция обратного вызова вызывается правильно, когда я выбираю дату в своем календаре. Однако, если я выбираю активную дату, которая уже выбрана, всплывающее окно закрывается, но функция обратного вызова не вызывается. Насколько я вижу, нет никакой возможности запустить функцию, когда выбрана та же дата.

Итак, мой вопрос был бы: есть ли способ взлома иметь функцию обратного вызова, которая вызывается при выборе той же даты?

Например, я попробовал следующий фрагмент кода, чтобы добавить слушатель в активную ячейку, но он также не запущен:

 $('td.active.start-date.active.end-date.available').on('click', function () {
   console.log('the same date is selected')
 })

Answer 1

Что вы можете сделать, так это привязать дополнительное событие к вашему входу, которое будет вызываться при выборе опции. Посмотрите следующий код (предполагая, что вводом является элемент с id demo) Поскольку вы уже используете jQuery, мой пример также использует это:

$('#demo').on('change.datepicker', function(ev){
  var picker = $(ev.target).data('daterangepicker');
  console.log(picker.startDate); // contains the selected start date
  console.log(picker.endDate); // contains the selected end date 

  // ... here you can compare the dates and call your callback.
});

Надеюсь, это поможет!

Answer 2

Событие click не работает, но событие mousedown работает.

Ниже приведен пример, который идентифицирует выбранный элемент ('td.available') и программно щелкает ту же дату еще раз.

      $('#demo').on('showCalendar.daterangepicker', function(ev, picker) {

    function triggerMouseEvent (node, eventType) {
        var clickEvent = document.createEvent ('MouseEvents');
        clickEvent.initEvent (eventType, true, true);
        node.dispatchEvent (clickEvent);
    }
    // when user selects ("mousedown") any date in the calendar:
    $('td.available').on("mousedown", function() {
        clickedElement = $('td.in-range')[0]; // this is the clicked element
        
        // example: programatically click again.
        triggerMouseEvent (clickedElement, "mouseover");
        triggerMouseEvent (clickedElement, "mousedown");
        triggerMouseEvent (clickedElement, "mouseup");
        triggerMouseEvent (clickedElement, "click");
      );
    });
});