javascript - jQuery UI Datepicker weird behavior - Stack Overflow

admin管理员组

文章数量:1022393

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:

/

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.

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/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.

• javascript
• jquery-ui
• jquery-ui-datepicker

Share Improve this question Follow edited Jun 6, 2013 at 12:42 Irvin Dominin 31k99 gold badges8080 silver badges113113 bronze badges asked Jun 6, 2013 at 6:29 Gustavo VargasGustavo Vargas 2,59722 gold badges2525 silver badges3333 bronze badges 4

• showCurrentAtPos used only to display the current month at desired position. It is not for defining the behavior after the select is performed – DDK Commented Jun 6, 2013 at 6:46
• No, I saw this before asking here, this fixes a problem when showing the datepicker, my problem occurs after the used selects a date. – Gustavo Vargas Commented Jun 6, 2013 at 6:53
• may be you can to reset the datepicker based on the selected date – DDK Commented Jun 6, 2013 at 6:54
• It's a strange behaviour...you want something like this jsfiddle/huPSb ? – Irvin Dominin Commented Jun 6, 2013 at 7:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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/huPSb/1/

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/4FFnp/

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./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./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./ticket/9923#ment:4 , http://bugs.jqueryui./ticket/7580?cnum_edit=5#ment:5 , http://bugs.jqueryui./ticket/7580#ment:5 )

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:

/

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.

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/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.

• javascript
• jquery-ui
• jquery-ui-datepicker

Share Improve this question Follow edited Jun 6, 2013 at 12:42 Irvin Dominin 31k99 gold badges8080 silver badges113113 bronze badges asked Jun 6, 2013 at 6:29 Gustavo VargasGustavo Vargas 2,59722 gold badges2525 silver badges3333 bronze badges 4

• showCurrentAtPos used only to display the current month at desired position. It is not for defining the behavior after the select is performed – DDK Commented Jun 6, 2013 at 6:46
• No, I saw this before asking here, this fixes a problem when showing the datepicker, my problem occurs after the used selects a date. – Gustavo Vargas Commented Jun 6, 2013 at 6:53
• may be you can to reset the datepicker based on the selected date – DDK Commented Jun 6, 2013 at 6:54
• It's a strange behaviour...you want something like this jsfiddle/huPSb ? – Irvin Dominin Commented Jun 6, 2013 at 7:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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/huPSb/1/

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/4FFnp/

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./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./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./ticket/9923#ment:4 , http://bugs.jqueryui./ticket/7580?cnum_edit=5#ment:5 , http://bugs.jqueryui./ticket/7580#ment:5 )

本文标签： javascriptjQuery UI Datepicker weird behaviorStack Overflow