JQuery user interface

Question

I am having a weird problem working with a simple datepicker using jqueryUI. I just want to show a two-month calendar with the 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 strange behavior that you can test here:

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

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

If you delete the line showCurrentAtPos: 1 , this behavior will stop, but in this case I will have the current month and the next, this is not what I need.

Is this a mistake or am I cursing something?

By the way, I am using the latest version of jquery and jqueryUI. And only tested in Chrome so far.

Answer 1

This is a jQuery UI error datepicker ticket , this happens when datepicker calculates and draws months and doesn’t make good use of 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 indicated on the ticket:

 if (inst.drawMonth == showCurrentAtPos){ drawMonth = inst.drawMonth - showCurrentAtPos; } else{ drawMonth = inst.drawMonth; } 

or apply the 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/

Answer 2

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

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

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

Answer 3

I found a solution and fixed jquery-ui.js basically with two lines of code in the datepicker _adjustDate () and _updateDatepicker () routines:

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

Bug fixed at http://bugs.jqueryui.com/ticket/9923#commentrige , http://bugs.jqueryui.com/ticket/7580?cnum_edit=5#commenthaps , http: // bugs .jqueryui.com / ticket / 7580 # comment: 5 )