Callback function when clicked on "selected date" in daterangepicker

Issue

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')
 })

Solution

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!

Answered By – gkempkens

Answer Checked By – Senaida (AngularFixing Volunteer)