The month are shifting its position while selecting dates

[Md Masudur Rahman]

Hi,

I'm using the 3 dates inline view. I'm facing an issue that when I select a date from the 2nd or 3rd month the month comes at the first position. Is there any way to fix the position changing behavior?

[markusweb]

have you found a solution?

[markusweb]

i have created a quick and dirty patch. Don't know if this is the best solution and works with every option but for me it is working quite good.

--- jquery.datepick.js.dist 2016-11-14 20:15:00.849388000 +0200
+++ jquery.datepick.js  2020-04-30 21:04:54.205478000 +0200
@@ -9,6 +9,9 @@

    var pluginName = 'datepick';

+/* PATCH wlive 2020: no month shift with multiple months */
+var wliveLastDate = 0;
+var wliveWasDateSelected = 0;

    /** Create the datepicker plugin.
        <p>Sets an input field to popup a calendar for date entry,
@@ -1929,6 +1932,8 @@
            @param {number} [day] The day to show.
            @example $(selector).datepick('showMonth', 2014, 12, 25) */
        showMonth: function(elem, year, month, day) {
+           /* PATCH wlive 2020: no month shift with multiple months */
+           wliveWasDateSelected=0;
            var inst = this._getInst(elem);
            if (!$.isEmptyObject(inst) && (typeof day !== 'undefined' ||
                    (inst.drawDate.getFullYear() !== year || inst.drawDate.getMonth() + 1 !== month))) {
@@ -2024,6 +2029,8 @@
                }
                inst.prevDate = inst.drawDate = plugin.newDate(date);
                this._updateInput(elem);
+               /* PATCH wlive 2020: no month shift with multiple months */
+               wliveWasDateSelected=1;
                if (inst.inline || inst.pickingRange || inst.selectedDates.length <
                        (inst.options.multiSelect || (inst.options.rangeSelect ? 2 : 1))) {
                    this._update(elem);
@@ -2040,11 +2047,21 @@
            @param {object} inst The current instance settings.
            @return {jQuery} The datepicker content */
        _generateContent: function(elem, inst) {
+           /* PATCH wlive 2020: no month shift with multiple months */
+           if (!wliveWasDateSelected) {
+               wliveLastDate=inst.drawDate;
+           }
            var monthsToShow = inst.options.monthsToShow;
            monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
            inst.drawDate = this._checkMinMax(
                inst.drawDate || inst.get('defaultDate') || plugin.today(), inst);
-           var drawDate = plugin._applyMonthsOffset(plugin.newDate(inst.drawDate), inst);
+           /* PATCH wlive 2020: no month shift with multiple months */
+           var drawDate;
+           if (wliveWasDateSelected) {
+               drawDate = plugin._applyMonthsOffset(plugin.newDate(wliveLastDate), inst);
+           } else {
+               drawDate = plugin._applyMonthsOffset(plugin.newDate(inst.drawDate), inst);
+           }
            // Generate months
            var monthRows = '';
            for (var row = 0; row < monthsToShow[0]; row++) {

[Md Masudur Rahman]

have you found a solution?

no man

[Harsh Bharucha]

i have created a quick and dirty patch. Don't know if this is the best solution and works with every option but for me it is working quite good.

--- jquery.datepick.js.dist 2016-11-14 20:15:00.849388000 +0200
+++ jquery.datepick.js  2020-04-30 21:04:54.205478000 +0200
@@ -9,6 +9,9 @@

    var pluginName = 'datepick';

+/* PATCH wlive 2020: no month shift with multiple months */
+var wliveLastDate = 0;
+var wliveWasDateSelected = 0;

    /** Create the datepicker plugin.
        <p>Sets an input field to popup a calendar for date entry,
@@ -1929,6 +1932,8 @@
            @param {number} [day] The day to show.
            @example $(selector).datepick('showMonth', 2014, 12, 25) */
        showMonth: function(elem, year, month, day) {
+           /* PATCH wlive 2020: no month shift with multiple months */
+           wliveWasDateSelected=0;
            var inst = this._getInst(elem);
            if (!$.isEmptyObject(inst) && (typeof day !== 'undefined' ||
                    (inst.drawDate.getFullYear() !== year || inst.drawDate.getMonth() + 1 !== month))) {
@@ -2024,6 +2029,8 @@
                }
                inst.prevDate = inst.drawDate = plugin.newDate(date);
                this._updateInput(elem);
+               /* PATCH wlive 2020: no month shift with multiple months */
+               wliveWasDateSelected=1;
                if (inst.inline || inst.pickingRange || inst.selectedDates.length <
                        (inst.options.multiSelect || (inst.options.rangeSelect ? 2 : 1))) {
                    this._update(elem);
@@ -2040,11 +2047,21 @@
            @param {object} inst The current instance settings.
            @return {jQuery} The datepicker content */
        _generateContent: function(elem, inst) {
+           /* PATCH wlive 2020: no month shift with multiple months */
+           if (!wliveWasDateSelected) {
+               wliveLastDate=inst.drawDate;
+           }
            var monthsToShow = inst.options.monthsToShow;
            monthsToShow = ($.isArray(monthsToShow) ? monthsToShow : [1, monthsToShow]);
            inst.drawDate = this._checkMinMax(
                inst.drawDate || inst.get('defaultDate') || plugin.today(), inst);
-           var drawDate = plugin._applyMonthsOffset(plugin.newDate(inst.drawDate), inst);
+           /* PATCH wlive 2020: no month shift with multiple months */
+           var drawDate;
+           if (wliveWasDateSelected) {
+               drawDate = plugin._applyMonthsOffset(plugin.newDate(wliveLastDate), inst);
+           } else {
+               drawDate = plugin._applyMonthsOffset(plugin.newDate(inst.drawDate), inst);
+           }
            // Generate months
            var monthRows = '';
            for (var row = 0; row < monthsToShow[0]; row++) {

Works Beautifully! @markusweb

[Harsh Bharucha]

jquery.datepick.zip

Updated jquery.datepick.js by applying @markusweb's fix to Date picker for jQuery v5.1.1.