Calendar "jumps" on select if multiple months are displayed

[anush]

If the numberOfMonths value is set to greater than 1, anytime you select a date in a month other than the first month, the calendar moves the month that you just selected to become the first month, causing a "jump".

For example, I've set numberOfMonths = 2 and the calendar currently displays Jan and Feb. If I pick a date in Jan, there is no problem. But if I pick a date in Feb, the calendar refreshes and now displays Feb and Mar.

It may have something to do with the showCurrentAtPos option, but the issue only seems to happen with MDP and not with the standard datepicker.

[inwedes]

same problem!

[ddelella]

I do not believe this is an issue but actual functionality. It appears to be moving the month with the currently selected date to the front of the view. There should be an option to disable this movement.

[antucg]

Hi everybody. I think that I have found a solution. So far it has worked for me. I have tried to do it in a correct way.
What I have done is to create a new property called: jumpOnMultiSelect. I set it to false if want to avoid this behaviour. Then I went to the plugin, and I looked for the line where the jump is programmed. This is in the line 109, it shuold be read as follows:
} else {
if(this.multiDatesPicker.jumpOnMultiSelect)
$this
.datepicker("option", "minDate", this.multiDatesPicker.minDate)
.datepicker("option", "maxDate", this.multiDatesPicker.maxDate);
}

Just on top of the else clausure, there are two similar lines, where the min and maxDate are stablished. I think that is needed to the same with those two. But I have not done yet, because I did not need so far. If you have any problem post it, I will be watching this post.
Bye.

[ghost]

I've done some testing and found a solution to the problem. ddelella was correct in that it is functioning as directed. In order to prevent the month jumping, simply remove the showCurrentAtPos option.

[calpdx]

I don't think that this issue is closed. If you go to your demo page http://multidatespickr.sourceforge.net/ and edit the full year example to be:

var today = new Date();
var y = today.getFullYear();
$('#full-year').multiDatesPicker({
    addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
    numberOfMonths: [3,4]
});

it still jumps to bring the month you just clicked in to the first element.

[ghost]

I'm going to have to check with Luca to see what code he's using on that page, because I put together a similar test with just the minimum code required and it didn't jump at all.

<link redacted>

Only line in the body is

<div id='datepickerInput'></div>

And in the head, to call the datepicker:

$(function() {
    var today = new Date();
    var y = today.getFullYear();
    $('#datepickerInput').multiDatesPicker({
        addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
        numberOfMonths: [3,4]
    });
});

I even used a link to the same exact MDP code he's using. So I think the error is on the site.

Thanks for pointing this out, I'll figure out why it doesn't work on the demo.

[calpdx]

Even in this example, the calendar jumps.
If I click on October 4 2012, the October month shifts to the first
position in Chrome. Using Firefox or IE, the calendar seems to shift about
a year and a half backwards.
Is it not jumping for you?

Calvin

On Tue, Sep 4, 2012 at 12:18 PM, aqisnotliquid [email protected]:

I'm going to have to check with Luca to see what code he's using on that
page, because I put together a similar test with just the minimum code
required and it didn't jump at all.

http://loft.mastersem.com/multiDatesPickerTest.php

Only line in the body is

And in the head, to call the datepicker:
$(function() {
var today = new Date();
var y = today.getFullYear();
$('#datepickerInput').multiDatesPicker({
addDates: ['10/14/'+y, '02/19/'+y, '01/14/'+y, '11/16/'+y],
numberOfMonths: [3,4]
});
});

I even used a link to the same exact MDP code he's using. So I think the
error is on the site.

Thanks for pointing this out, I'll figure out why it doesn't work on the
demo.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/16#issuecomment-8275261.

[ghost]

It is now. I'm making active changes to it to figure out what's different.

[K232]

Setting the MaxDate +1Y fixes the problem if you only want to have 1 year, see http://stackoverflow.com/questions/10198379/jqueryui-datepicker-12-months-view-jumps-when-clicked-on-date. It does not help if you want to display 12 months but also allow the user to scroll to 2nd year etc.

[mgasparel]

I followed antugc's suggestion... simply removed the offending lines of code from the plugin. No more jumping.

[ghost]

I may have found a way to fix this issue and also remerge the performance code from #23, but it needs further testing. I'll put the code up.

See #27 for update code. Includes a modified version of #23, the apparent fix to this issue.

[GRogkakos]

Just remove the else in line 108 aka (else {
$this
.datepicker("option", "minDate", this.multiDatesPicker.minDate)
.datepicker("option", "maxDate", this.multiDatesPicker.maxDate);
})

[ggeiger]

The above method from GRogkakos works.

[narfotic]

Yes, this works but:
You need to remove: 'showCurrentAtPos: today.getMonth()'
and by doing so the year does not start with januari but with the current month.

[aBrookland]

I've hit the same problem where I need to show a whole year starting from January of the current year but able to navigate to next/previous years and the months jump around when a date is selected.

The only solution I found to this was to remove 'showCurrentAtPos: today.getMonth()' and instead do:

var today = new Date();
var options = {
numberOfMonths: [3, 4],
stepMonths: 12
};

$element.multiDatesPicker(options);
$element.datepicker('setDate', '01/01/' + today.getFullYear());

This sets the current month to January and the current month is shown in the first position by default, since the setDate command is on the underlying datepicker and not the multiDatesPicker the date isn't actually shown as selected or included in the multiDatesPicker list of selected dates.

[dubrox]

Sorry, actually this multiple months problem affected many and actually was not a bug of MDP nor jQuery Datepicker... it was my example that used the wrong option!
I've updated it, you can check it out: http://multidatespickr.sourceforge.net/#full-year-demo

[attam333]

I've a problem about multiDatesPicker...
var today = new Date();
var y = today.getFullYear();
$('#custom-date-format').multiDatesPicker({
addDates: ['01/14/'+y, '01/19/'+y, '01/14/'+y, '02/16/'+y],
numberOfMonths: [1,1],
defaultDate: '1/1/'+y
});
This sets the Date of January month and feb 16 date but calander show the 4 Aug of 2020 year...

[gavinlaw]

Below option resolved jumping issue when multiple dates selected across different months

var tempSelectedDate = '';

beforeShow: function(input, inst) {
inst.settings.defaultDate = tempSelectedDate;
},
onSelect: function(date) {
tempSelectedDate = date;
},
onChangeMonthYear: function(year, month, widget) {
var months = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
tempSelectedDate = '1-'+months[month-1]+'-'+year;
}

[michaelc4]

My solution is:

            // generates the new string of added dates
            var inputs_values = $this.multiDatesPicker('value');

            // fills the input field back with all the dates in the calendar
            if (this.tagName == 'INPUT') $this.val(inputs_values);

            // Fixes the altField filled with defaultDate by default
            var altFieldOption = $this.datepicker('option', 'altField');
            if (altFieldOption) $(altFieldOption).val(inputs_values);

            // Updates the calendar view
            //$this.datepicker('refresh'); <------------- line 177

Because this line makes the code run two times.

1st Refresh when create a element

result jquery ui

2nd refresh in sequence inside multipledatespicker

result jquery ui

this makes two moves 1st:(January ->December) 2nd(December->November)

[dubrox]

Here a demostration of the effects of the option showCurrentAtPos on multiple months calendar, both with vanilla jQuery UI datepicker and MDP: http://jsfiddle.net/y0oLyyxu/2/
As you can see, it is not an MDP issue.

I'll test if removing the refresh mentioned by @michaelc4 suggests doesn't break the funcionality, so to avoid unneeded code execution. What I know is that it doesn't solve the jumping problem (already tested).

[demo-360]

Hi,
I have this configuration for my multi dates picker

$host.find('#availability_calendar').multiDatesPicker({
dateFormat: 'yy-mm-dd',
numberOfMonths: [2, 3],
minDate: 0,
stepMonths: 3
}

And when I select a date in a month other then the first, calendar jump to display month of the selected date at position 0. How could I avoid this?

With what I read hear I should not have this problem as I haven't specify showCurrentAtPos.

I'm using multi-dates-picker-rails that package this code

thanks