Question

I’m trying to get the StartDate and EndDate variables of the date range picker when the OnClose function is called, however I am having difficulties.

I replaced

onClose: function(){},

with

onClose: alertdata,

However that already breaks the daterange picker and I cannot pick dates anymore.
According to the documentation, there already are variables set dateStart and dateEnd, so what I was going to do is this:

  function alertData() {
      $("#DivDateStart").html(dateStart); //update div for debugging
      $("#DivDateEnd").html(dateEnd); //update div for debugging
  }    

And then just use those variables in a POST method to send all that to a PHP file. Here is what I have now, I would be grateful if someone let me know where I made a mistake in getting the data, thanks!

Answer 1

Try accessing each datepicker individually to get the selected dates like so:

onClose:function(){
    var startDate = $('#startDatePickerID').datepicker("getDate");
    var endDate = $('#endDatePickerID').datepicker("getDate");            
}

Here is a live example: http://jsfiddle.net/Rex3q/1/

Update (based on comments)

You can retrieve the start and end dates by modifying the source of the daterangepicker.jQuery.js file.

Replace the hideRP function with the function below:

function hideRP() {
    if (rp.data('state') == 'open') {
        rp.data('state', 'closed');
        rp.fadeOut(300);

        var startDate = rp.find('.range-start').datepicker('getDate');
        var endDate = rp.find('.range-end').datepicker('getDate');

        options.onClose(startDate, endDate);
    }
}

This will retrieve the start and end date from the individual datepickers and pass them to the onClose function.

Then when you initialise the daterangepicker, specify the onClose function like below:

$('#rangePickerID').daterangepicker(
{
    arrows: true,
    onClose: function (startDate, endDate) {
        alert(startDate);
        alert(endDate);
    }
});

Hope this helps.