Input multpleDatePickers Refreshes when selecting 3rd date

[marnicsan]

Hi, i'm having troubles when i try to select more than 2 dates. When I select the 3rd date, the datepicker refresh to the start date and when I try to go back to a previous month it refreshes again to the start date. When finally I can refrech the 3rd and 4th dates it refreshs all over again. Here`s my code:

$('#datePick').multiDatesPicker({ maxPicks: $("#idAccidents").val(), changeMonth: true, changeYear: true, maxDate: 0 });

I have recently tested that it is also happening on your webpage [http://multidatespickr.sourceforge.net/] with the "FROM INPUT" example.

[NickHeurter]

I'm facing the exact same error. Would be great if this could be fixed :) Thanks already!

[NickHeurter]

@marnicsan did you already find a solution for this problem? I'm still facing this error.

[NickHeurter]

@marnicsan any solution so far?

[thomas0087]

@NickHeurter I've found a hacky fix. The issue exists in jquery's date picker not in the multi date picker javascript.

$('#from-input').multiDatesPicker();
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
  var target = $(id);
  var inst = this._getInst(target[0]);
  inst.inline = true;
  $.datepicker._selectDateOverload(id, dateStr);
  inst.inline = false;
  if (target[0].multiDatesPicker != null) {
    target[0].multiDatesPicker.changed = false;
  } else {
    target.multiDatesPicker.changed = false;
  }
  this._updateDatepicker(inst);
};

[NickHeurter]

@thomas0087, great hacky fix dude! Thanks a lot, works like a charm.

[juanelobus]

@thomas0087 It works fine dude! Thanks so much.

[alphanumeric0101]

@thomas0087 and anyone else trying to implement a multiple date picker in Javascript in 2017 (my heartfelt sympathies), for whatever reason, the script only worked for me when I replaced: $.datepicker._selectDateOverload(id, dateStr) with this._selectDateOverload(id, dateStr) Otherwise I was getting cannot read propert selectDateOverload of undefined. Works nicely afterward.

Thanks for the hack!

[mypetertw]

@thomas0087 Thanks! its work!

[jcerullo]

It’s important in my app that the calendar stay fixed in place as dates are selected. Thomas’ fix works great, but the calendar no longer stays in place. Is there an easy fix?

[Tynianov]

@thomas0087 thank you, you really helped me

[Dimabytes]

Awesome, thanks a lot!

[RensTillmann]

@thomas0087 2016 meets 2021, still works. However for those interested, I have improved upon the code from Thomas. I had a situation where I would have multiple datepickers on a single page, some with maxPicks not set, or set to 1, and some above 1. The code from Thomas had a small problem which was that when you would choose a date from a datepicker with maxPicks not set, or set to just 1, it would not close the datepicker automatically again like it would normally. At the bottom of the function $.datepicker._selectDate I added some code which takes care of that. Perhaps it might help someone one day.

$(el).multiDatesPicker(options);
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    $.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    if (target[0].multiDatesPicker != null) {
        target[0].multiDatesPicker.changed = false;
    } else {
        target.multiDatesPicker.changed = false;
    }
    this._updateDatepicker(inst);
    // Close datepicker if it isn't a so called Multi-datepicker, or when maxPicks is set to 1
    if(typeof inst.settings.maxPicks==='undefined' || inst.settings.maxPicks<=1 ){
        $(target).datepicker('hide');
    }
};

[elia-c]

@NickHeurter I've found a hacky fix. The issue exists in jquery's date picker not in the multi date picker javascript.

$('#from-input').multiDatesPicker();
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
  var target = $(id);
  var inst = this._getInst(target[0]);
  inst.inline = true;
  $.datepicker._selectDateOverload(id, dateStr);
  inst.inline = false;
  if (target[0].multiDatesPicker != null) {
    target[0].multiDatesPicker.changed = false;
  } else {
    target.multiDatesPicker.changed = false;
  }
  this._updateDatepicker(inst);
};

Solution work only with one instance of multiDatesPicker in the page. I have two instance and I get the error:

Uncaught Missing instance data for this datepicker

how can I solve?