DatePicker选项“changemonth”和“changeyear”在jqGrid的编辑表单中不起作用
我已经定制了jqGrid的编辑表单，让一些字段使用jQuery的DatePicker来填充它们。 我在colModel选项中按如下方式配置它：
colModel: [ ... { name: 'Column', editable: true, index: 'Column', width: width, align: "center", editrules: { integer: true, required: true }, editoptions: { size: 5, dataInit: function (el) { setTimeout(function () { SetDatepicker('input[name^="' + el.name + '"]'); }, 100); } }, formoptions: { rowpos: 1 } }, ... ], 这是有效的，因为它在单击输入字段时部署DatePicker日历。
不是SetDatepicker函数如下所示：
function SetDatepicker(control) { $.datepicker.setDefaults($.datepicker.regional['es']); $(control).datepicker({ changeMonth: true, changeYear: true, monthNamesShort: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"] }); }
它将changeMonth和changeYear设置为true，因此DatePicker应在其标题中有两个选项，一个用于年份，一个用于年份，以及箭头沿手动移动日历。 问题是，无法显示选择选项：它们对鼠标点击没有反应。 它们可以使用箭头，因此您可以一次向前和向后移动一个月，但使用这些选项的想法并非必须这样做。
我有另一个字段，在jqGrid的编辑表单之外，还有一个使用相同函数附加到它的DatePicker。 它工作正常，这让我觉得问题在于jqGrid的事件处理。
有任何想法吗？
谢谢
UPD
它在Firefox中运行良好，但在IE9-7和Chrome中都没有。
UPD2
我创建了一个jsFiddle示例，其中包含使用datepicker输入的代码以及如何设置jqGrid以使用该function： http ： //jsfiddle.net/rUkyF/
模态模式是问题。 当您单击模态 jqGrid时，尝试将焦点放在 表单的第一个元素上，如您所见， jquery-ui将div日历附加到正文并将其附加到模态div 。 评论modal: true如此修复它。
grid.jqGrid('editGridRow', rowID, { addCaption: "Agregar Proyecto", topinfo: "Introduzca los nuevos datos del proyecto.", viewPagerButtons: false, //modal: true, jqModal: true, saveicon: [true, "left", "ui-icon-disk"], closeicon: [true, "right", "ui-icon-close"], closeAfterEdit: true, resize: false, width: wWidth, reloadAfterSubmit: true });
我想如果你愿意，问题就会解决
SetDatepicker(el);
代替
SetDatepicker('input[name^="' + el.name + '"]');
更新 ：您的jsFiddler演示有一些错误。 查看修改后的演示http://jsfiddle.net/rUkyF/7/并尝试重现该问题。 我觉得没问题。
更新2 ：我发现iJD找到了问题的根源。 我只是想描述为什么 modal: true干扰jQuery Datepicker的工作。 我希望iJD奖励赏金，我只为其他想要了解他们是否应该使用modal: true选项的读者写下面的文本modal: true或jqModal: false 。
如果使用editGridRow modal: true选项，则显示表单的方法$.jgrid.viewModal将在此处使用modal: true选项调用，该选项将被转发（参见该行 ）到jQuery.jqm （ $.fn.jqm ）在模块jqModal.js中定义。 结果，在jqm代码行中使用参数'bind'调用L函数。 因此，函数L将document keypress ， keydown和mousedown事件绑定（参见代码行 ） 到下一行中定义的事件处理程序m
var m = function (e) { var h = H[A[A.length - 1]], r = (!$(e.target).parents('.jqmID' + hs)[0]); if(r) f(h); return !r; }
其中函数f被定义为
var f = function (h) { try { $(':input:visible', hw)[0].focus(); } catch (_) {} }
因此我们可以看到modal: true的使用是在阻止所有不是div父类'.jqmID' + hs使用类'.jqmID' + hs （通常是'.jqmID1' ）。 在这种情况下，表单的第一个可见字段将获得焦点（因为调用函数f ）。
众所周知，许多jQuery UI控件创建了直接子元素（menu，datepicker等）（例如，Datepicker创建
，它是直接子元素） 。 因此，可以阻止此类控件的键盘和鼠标事件 。
因此，如果要在jqGrid表单中使用某些其他控件的jQuery UI控件，则不应使用modal: true选项。
顺便说一句， editGridRow的jqModal选项的默认值已经为true （参见文档 ）。 因此可以从当前代码中删除jqModal: true ，就像editGridRow其他选项editGridRow 。 如果使用jqModal: false ，则editgridRow将不使用 jqModal.js插件，并且也将忽略modal: true选项。 在这种情况下，整个HTML页面将不会被阻止。 仅当前网格将被相应的网格覆盖阻挡。
在我使用$.extend($.jgrid.edit, {...})的个人默认设置中， jqModal被关闭：
$.extend($.jgrid.edit, { recreateForm: true, jqModal: false, closeAfterAdd: true, closeAfterEdit: true, ... // other less common settings });
您应该自己决定要使用哪些默认设置。
更新3 ：我发布了错误报告 ，建议如何修复jqGrid的代码。 如果改变了这条线
m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+hs)[0]);if(r)f(h);return !r;},
到了线
m=function(e){ var h=H[A[A.length-1]], r=(!$(e.target).parents('.jqmID'+hs)[0]); if(r) { // e.target could be inside of element with absolute position like menu item // in the case parents call above will don't find the modal dialog // To fix the problem we verify additionally whether e.target is inside of // an element having the class 'jqmID'+hs $('.jqmID'+hs).each(function() { var $self = $(this), offset = $self.offset(); if (offset.top <= e.pageY && e.pageY <= offset.top + $self.height() && offset.left <= e.pageX && e.pageX <= offset.left + $self.width()) { r = false; // e.target is do inside of the dialog return false; // stop the loop } }); f(h); } return !r; },
那么问题应该修复。 该演示使用modal: true选项，而datepicker在编辑对话框中使用。 它使用我描述的修复程序。
更新4 ：我在答案的更新3中描述的错误修复现在包含在jqGrid的主代码中（参见此处 ）。 因此版本> 4.4.5不应该有所描述的问题。
在你的jsfiddle中，你已经在开头设置了带有#符号的id属性。 据我所知，你应该只使用a-zA-Z_符号。 至少在我的经验中，我主要在IE中遇到了很多问题。
在删除了# （http://jsfiddle.net/tftd/gwC4F/1/）之后，一切都像最新的FF，Chrome，Opera和Safari中的魅力一样。