jQuery UI Datepicker weird behavior

问题:

I'm having a weird problem while working with a simple datepicker using jqueryUI. I simply want to show a two month calendar with LAST month and current month. I used this code:

$(function () {
    $('#picker').datepicker({
        numberOfMonths: 2,
        showCurrentAtPos: 1,
        dateFormat: "yy-mm-dd",
        onSelect: function () {
            $('#out').html(this.value);
        }
    });
});

<div id="picker"></div>
<output id="out"></output>

It displays what I want but with an strange behavior as you can check here:

http://jsfiddle.net/xgvargas/UCbxf/

When you select a date it jumps to other month and, in some cases, the selected date is no longer visible, even if the date it returns is correct.

If you remove the line showCurrentAtPos:1, then this behavior stops but in this case I'll have current month and next one, this is not what I need.

Is this a bug or am I forgeting something?

By the way, I'm using the last version of jquery and jqueryUI. And only tested in Chrome so far.

回答1:

It's a jQuery UI datepicker bug ticket it happens when the datepicker calculate and draw the months and doesn't use well the current month difference defined by showCurrentAtPos.

A possible solution is to add this block of code to the jquery.ui.datepicker.js file as reported in the ticket:

if (inst.drawMonth == showCurrentAtPos){

drawMonth = inst.drawMonth - showCurrentAtPos;

} else{

drawMonth = inst.drawMonth;

}

or to apply a patch in your onSelect function as you think:

onSelect: function (dateText, datePicker) {
    datePicker.drawMonth += $("#picker").datepicker("option", "showCurrentAtPos");
    $('#out').html(this.value);
}

Fiddle: http://jsfiddle.net/huPSb/1/

回答2:

if you change select function with this code, everything will work fine

  onSelect: function (dateText, inst) {
         inst.drawMonth +=1; 
        $('#out').html(this.value);
    }

Here is working example http://jsfiddle.net/4FFnp/

回答3:

I found a solution and patched the jquery-ui.js in basically two code lines in the datepicker subroutines _adjustDate() and _updateDatepicker():

--- jquery-ui.orig.js   2015-11-23 20:04:52.000000000 +0100
+++ jquery-ui.js    2015-11-23 17:56:37.987111191 +0100
@@ -8815,6 +8815,8 @@
        origyearshtml = inst.yearshtml = null;
        }, 0);
    }
+       // FIX BUG http://bugs.jqueryui.com/ticket/7288
+       inst.drawMonth += this._get(inst, "showCurrentAtPos");
},

// #6694 - don't focus the input if it's already focused
@@ -8940,9 +8942,14 @@
    if (this._isDisabledDatepicker(target[0])) {
        return;
    }
+       // FIX BUG http://bugs.jqueryui.com/ticket/7288
+       /*
        this._adjustInstDate(inst, offset +
        (period === "M" ? this._get(inst, "showCurrentAtPos") : 0), // undo positioning
        period);
+       */
+       this._adjustInstDate(inst, offset, period);
+
    this._updateDatepicker(inst);
},

The bug fix has been submitted upstream in http://bugs.jqueryui.com/ticket/9923#comment:4 , http://bugs.jqueryui.com/ticket/7580?cnum_edit=5#comment:5 , http://bugs.jqueryui.com/ticket/7580#comment:5 )