Jquery datepicker issue with jquery tab and jqgrid

问题

I've JSP page which has tabs. Each tab loads a jqgrid(The same JSP is loaded in all three tabs). I've a filter in the jqgrid and for the date fields I'm using a datepicker.

The datepicker works fine in the first tab but when I try to hit "Prev"/"Next" in datepicker in other tabs it jumps to year 1900. Refer to images below:

Date picker works as expected in first tab:

Date picker jumps to 1899 on hitting prev in second tab:

I tried debugging code inside jquery-ui-1.10.0.custom.js

/* Adjust one of the date sub-fields. */
_adjustDate: function(id, offset, period) {
    var target = $(id),
        inst = this._getInst(target[0]);
    console.dir(inst);
    if (this._isDisabledDatepicker(target[0])) {
        return;
    }
    this._adjustInstDate(inst, offset +
        (period === "M" ? this._get(inst, "showCurrentAtPos") : 0), // undo positioning
        period);
    this._updateDatepicker(inst);
},

I got the following output for the two cases:

First tab:

LOG: {
    id : "gs_vpReportDate",
    input : [object Object],
    selectedDay : 20,
    selectedMonth : 10,
    selectedYear : 2013,
    drawMonth : 10,
    drawYear : 2013,
    inline : false,
    dpDiv : [object Object],
    settings : [object Object],
    append : [object Object],
    trigger : [object Object],
    lastVal : "",
    currentDay : 0,
    currentMonth : 0,
    currentYear : 0,
    yearshtml : null,
    _keyEvent : false
}

Second tab:

LOG: {
    id : "gs_vpReportDate",
    input : [object Object],
    selectedDay : 0,
    selectedMonth : 0,
    selectedYear : 0,
    drawMonth : 0,
    drawYear : 0,
    inline : false,
    dpDiv : [object Object],
    settings : [object Object],
    append : [object Object],
    trigger : [object Object]
}

Any ideas why this weird behavior?

Additional Info: The id is assigned dynamically.

Below is my jqgrid column:

{ name: 'vpReportDate', index: 'vpReportDate',datefmt:"m/d/Y", sorttype:"date", width: 65, searchoptions:{dataInit:showDatePicker}, sortable:true }

function showDatePicker(elem) {
    $(elem).datepicker({dateFormat:'mm/dd/yy', changeYear: true, changeMonth: true}).change(function() {
        $("#dasWorkQueueGrid_" + activeTabId)[0].triggerToolbar();
    });
};

回答1:

I found the solution to my issue. The root cause of the issue was that the when grid loaded on the click of second tab, the first grid was already present in the DOM and that was causing all the problem. So what I did before loading the grid I'm calling gridDestroy to destroy all the grids present in the DOM -

$("[id^=dasWorkQueueGrid_]").jqGrid('GridDestroy');

I'm using the wildcard in jquery selector to identify all the grids.

and then loading the grid:

$("#dasWorkQueueGrid_" + activeTabId).jqGrid({
   *** Grid Code ***
    });

来源：https://stackoverflow.com/questions/20106451/jquery-datepicker-issue-with-jquery-tab-and-jqgrid

标签

javascript

jquery

jsp

jqgrid

datepicker