单击日期范围选择器中的“选定日期”时的回调函数

Question

using the latest version of Daterangepicker for bootstrap

For the following calendar (standard example used in their website):

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

The given callback function is called correctly when I select a date in my calendar. However, if I select the active date which is already selected, the pop up is closed but the callback function is not called. As far as I see, there is no any opportunity provided to fire a function when the same date is selected.

So, my question would be: Is there a hacking way to have a callback function which is called when the same date is selected?

For instance, I tried the following piece of code to add a listener to the active cell but it is also not fired:

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

Answer 1

What you can do is bind an extra event to your input which will be called when you select an option. See the following code (assuming the element with id demo is your input) Since you already use jQuery my example uses this as well:

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

Hope this will help!

Answer 2

The 'click' event does not work, but the 'mousedown' event does.

Below an example, which identifies the clicked element ('td.available') and programatically clicks the same date again.

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