CODEWITHSUNDEEP
javascriptjqueryruby-on-railsdate
Sasikala J
Sasikala J

Reputation: 526

Calendar jumps to current month with jQuery multi date picker

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() {
  }
});

enter image description here

enter image description here

Can anyone help me to solve this issue?

Upvotes: 6

Views: 2703

Answers (2)

Josh Carter
Josh Carter

Reputation: 1

This answer didn't work for me.

I'm no expert but it seemed like maybe the defaultDate format has changed from when this answer was given.

Anyway, this is what I did for anyone who comes here through Google like I did. I was able to keep the showAnim effect as well, it doesn't really look fantastic though when selecting multiple dates. I guess it's good to give the user that extra confirmation of their accepted selection though.

A lot of the above answer still worked obviously. I've mostly just changed the way the defaultDate is handled by giving it a different value which I obtained by calculating the difference between the current day, month and year and the selected day, month and year. 

$("#inputID").multiDatesPicker({
  dateFormat: "dd-M-yy",
  minDate: 1,
  multidate: true,
  defaultDate: "0d",
  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 d = new Date();
    var dayDiff = datepickerObj.selectedDay - d.getDate();
    var monthDiff = datepickerObj.selectedMonth - d.getMonth();
    var yearDiff = datepickerObj.selectedYear - d.getFullYear();
    var pickedDate =
      "+" + dayDiff + "d +" + monthDiff + "m +" + yearDiff + "y";

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

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

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

Full credit to Louys for his answer, I would not have got this to work for my project without reviewing his code above.

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

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!!!
    }
});

Upvotes: 2

Related Questions