jquery datepicker问题与jquery选项卡和jqgrid [英] Jquery datepicker issue with jquery tab and jqgrid

问题描述

我有JSP页面有标签。每个选项卡加载一个jqgrid（同一个JSP加载在所有三个选项卡中）。我在jqgrid中有一个过滤器，对于日期字段我正在使用日期戳。

datepicker在第一个选项卡中正常工作，但是当我尝试点击上一页/下一页在其他选项卡中跳转到1900年。参考下图：

日期选择器按预期在第一个选项卡中工作：

日期选择器跳到1899在第二个选项卡中击中上一个：

我尝试过在jquery-ui-1.10.0.custom.js中调试代码

  / *调整其中一个日期子字段。 * / 
 _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），//撤销定位
期）; 
 this._updateDatepicker（inst）; 
}，
  

我得到以下两种情况的输出：

第一个标签：

 日志：{
 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对象]，
 lastVal：，
 currentDay：0，
 currentMonth：0，
 currentYear：0，
 yearshtml：null，
 _keyEvent：假
} 
  

第二个选项卡：

  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] 
} 
  

任何想法为什么这个奇怪的行为？

附加信息：
动态分配ID。

以下是我的jqgrid列：

  {name：'vpReportDate'，index：'vpReportDate'，datefmt：m / d / Y，sorttype：date，width：65，searchoptions：{dataInit：showDatePicker}，sortable：true} 
 
函数showDatePicker（elem）{
 $（elem）.datepicker（{dateFormat：'mm / dd / yy'，changeYear：true，changeMonth：true}）。change（function（） b $ b $（#dasWorkQueueGrid_+ activeTabId）[0] .triggerToolbar（）; 
}）; 
}; 
  

解决方案

我找到了解决问题的办法。问题的根本原因是，当网格加载到第二个选项卡的点击时，第一个网格已经存在于DOM中，并导致所有问题。所以我在加载网格之前做了什么我调用gridDestroy来销毁DOM中存在的所有网格 -

  $（ [id ^ = dasWorkQueueGrid _]）。jqGrid（'GridDestroy'）; 
  

• 我在jquery选择器中使用通配符来识别所有网格。

然后加载网格：

  $（＃dasWorkQueueGrid_+ activeTabId）.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();
    });
};

解决方案

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

这篇关于jquery datepicker问题与jquery选项卡和jqgrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！