Getting "Uncaught TypeError: Cannot read property 'empty' of undefined" error when using Datepair with jQuery datepicker and timepicker

[axelitus]

I'm trying to use Datepair with jQuery datepicker and jquery-timepicker but I'm getting an error when using it.

I have setup a JSFiddle to demonstrate the issue.

When loaded everything seems to be right, but when I click on the StartDate datepicker and select a date I get the error. Or when I select the EndDate datepicker and select a date earlier than the StarDate date I also get the error. Oddly enough, when I select the EndDate datepicker and select a date that's equal or later than the StartDate I don't get the error.

This error stops the datepair functionality as times and dates are not "synced" when selecting other values.

I narrowed the error to the jquery-ui.js file line 4558 in the _updateDatepicker function when calling inst.dpDiv.empty().append(this._generateHTML(inst)); as dpDiv is undefined and thus it cannot call the method emtpy().

When I comment out the code $('#dateTimePair').datepair(); everything works fine (excepto of course that the date and time pickers don't act as a pair).

Why is this happening? I couldn't find an answer to it. I'm using jQuery 2.1.3, jQueryUI 1.11.4 and the latest Datepicker (0.4.9) and jquery-timepicker (1.8.1) releases.

[jonthornton]

You need to set the parseDate and updateDate functions. Datepair.js defaults to Bootstrap Datepicker; those settings will be incorrect for use with jQueryUI Datepicker.

[axelitus]

Ok, as I understand correctly this should be done like this:

$('#dateTimePair').datepair({
    parseDate: function(input){
        var picker = $(input).data('pikaday');
        return picker.getDate();
    },
    updateDate: function(input, dateObj){
        var picker = $(input).data('pikaday');
        return picker.setDate(dateObj);
    }
});

Only I would need to know how jQueryUI's datepicker stores data?

[axelitus]

I think it worked, I ended up having this:

$('#dateTimePair').datepair({
  parseDate: function(input){
        return $(input).datepicker('getDate');
    },
  updateDate: function(input, dateObj){
      return $(input).datepicker('setDate', dateObj);
  }
});

Thanks for the tip! ;)