daterangepicker callback isn't work at all

Question

I have big trouble to run the callback function of my daterangepicker (from http://tamble.github.io/jquery-ui-daterangepicker/)

I didn't see any alert.

I have an 'apply' button at the bottom of the daterangepicker UI. I press apply and then fisld host date i've selected but no alert as it should show.

This is the code I've done (really simple code):

// will host dates in callback
                var startDate;
                var endDate;
                $('#daterangepicker').daterangepicker(
                  {
                      format: 'YYYY-MM-DD',
                      startDate: '2013-01-01',
                      endDate: '2013-12-31'
                  },
                  function (start, end) {
                      alert("hey");
                  }
                );

Thanks in advance to help me

EDIT:

// will host dates
                var startDate;
                var endDate;
                // Show multidatetime picker
                // more infos here: http://tamble.github.io/jquery-ui-daterangepicker/
                $('#daterangepicker').daterangepicker(
                  {
                      onChange: function (start, end) { alert('change : ' + start + ' - ' + end) },
                      format: 'YYYY-MM-DD',
                      startDate: '2013-01-01',
                      endDate: '2013-12-31'
                  }
                );

This is what I've tested but startDate and endDate are undefined.

EDIT 2 : This is my final code 100%working with the help of EricMathieu

// Show multidatetime picker
                // more infos here: http://tamble.github.io/jquery-ui-daterangepicker/
                $('#daterangepicker').daterangepicker(
                  {
                      format: 'YYYY-MM-DD',
                      startDate: '2013-01-01',
                      endDate: '2013-12-31'
                  });
...
var tempValues = JSON.parse($('#daterangepicker').val());
alert(tempValues.start);
alert(tempValues.end);

Answer 1

If you use the onChange callback, you'll have to read the values stored in the #daterangepicker, your start and end variables don't automatically get populated.

A simple approach to get the start / end values would be parse the start and end values (from JSON) in your onChange function:

var startDate;
var endDate;
// Show multidatetime picker
// more infos here: http://tamble.github.io/jquery-ui-daterangepicker/
$('#daterangepicker').daterangepicker(
    {
        onChange: function () {
            var tempValues = JSON.parse($('#daterangepicker').val());
            alert('change : ' + tempValues.start + ' - ' + tempValues.end)
        },
        format: 'YYYY-MM-DD',
        startDate: '2013-01-01',
        endDate: '2013-12-31'
     }
);