Calendar jumps to current month with jQuery multi date picker

Question

I am using a jQuery multi date picker in my html. When I am select the first date in date picker it works fine but when I choosing the second date it jumps to the current month but date picker value was append to input box.

I don't know what I've done wrong in this code:

$('#datePick').multiDatesPicker({
  beforeShowDay: my_array,
  // For disabling all "Sundays"
  dateFormat: "d/m/yy",
  maxDate: "+3m",
  minDate: "-1m",
  multidate: true,
  addDisabledDates: My_array,
  onSelect: function load() {
  }
});

Can anyone help me to solve this issue?

Answer 1

Excellent question.

I didn't find anything in the documentation to fix the strange behavior you noticed.
It really looks like a bug to me.

I worked on it and found a walk-around, using the onSlect callback.
But this implies to disable any show/hide built-in animation.
I don't think it's a big deal...

See this CodePen demo where the problem is recreated and can be compared with this solution.

And, below is the easy to cut and paste code (without all the console.logs of the demo).

$('#datePickTweaked').multiDatesPicker({

    // OPTIONS
    showAnim:"",                            // Disables the show/hide animation.
    beforeShowDay: $.datepicker.noWeekends, // No week-ends.
    dateFormat: "d/m/yy",
    maxDate: "+3m",
    minDate: "-1m",
    multidate: true,
    defaultDate:"0d",                       // Default date selection as of "today".
                                            // Needed to show the right month on focus.


    // The "walk-around" is HERE, in the "onSlect" callback.

    onSelect: function(){

        // Get the "datepicker" object.
        var datepickerObj = $(this).data("datepicker");

        // Get the "settings" object within "datepicker".
        var datepickerSettings = datepickerObj.settings;

        // Get the last date picked.
        var tempDay = datepickerObj.selectedDay;
        var tempMonth = datepickerObj.selectedMonth+1;
        var tempYear = datepickerObj.selectedYear;
        var pickedDate = tempDay+"/"+tempMonth+"/"+tempYear;

        // Remove previous "defaultDate" property.
        delete datepickerSettings["defaultDate"];

        // Add a new defaultDate property : value.
        datepickerSettings.defaultDate=pickedDate;

        // "Hacky trick" to avoid having to click twice on prev/next month.
        $("#datePickTweaked").blur();
        setTimeout(function(){
            $("#datePickTweaked").focus();
        },1);                               // 1 millisecond delay seems to be enought!!!
    }
});