DatePicker选项“更改月份"和"changeyear"在jqGrid的编辑表单中不起作用 [英] DatePicker options "changemonth" and "changeyear" not working in jqGrid's edit form

问题描述

我已经自定义了jqGrid的编辑表单，以使某些字段使用jQuery的DatePicker进行填充.我已经在colModel选项中对其进行了如下配置:

I have customized jqGrid's edit form to have some fields that use jQuery's DatePicker to fill them up. I have configure it as follows in the colModel option:

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日历.

This works, insofar that it deploys the DatePicker calendar when the input field is clicked.

不是SetDatepicker函数如下所示:

Not the SetDatepicker function looks as follows:

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在其标题中应具有两个选择，一个用于年份，一个用于年份，以及用于手动沿着日历移动的箭头.问题是，无法显示选择的选项:它们只是对鼠标单击没有反应.箭头确实起作用，因此您一次可以前后移动一个月，但是使用这些选项的想法不必这样做.

It has changeMonth and changeYear set to true, so the DatePicker should have in its header two selects, one for the year and one for the year, along with the arrows to move along the calendar manually. The problem is, the selects' options cannot be displayed: they are just unresponsive to the mouse clicks. The arrows do they job, so you can move forward and backwards one month at a time, but the idea of using these options is not having to do that.

在jqGrid的编辑表单之外，我还有另一个字段，该字段也使用相同的功能附加了DatePicker.它运行正常，因此让我认为问题出在jqGrid的事件处理上.

I have another field, outside jqGrid's edit forms, that also has a DatePicker attached to it using the same function. It works properly, so that makes me think the problem lies with jqGrid's event handling.

有什么想法吗?

谢谢

UPD

它在Firefox中可以正常工作，但在IE9-7和Chrome中均不能.

It works fine in Firefox, but it doesn't in IE9-7 nor Chrome.

UPD2

我创建了一个jsFiddle示例，其中包含使用datepicker输入的代码以及如何设置jqGrid以使用该功能: http://jsfiddle. net/rUkyF/

I have created a jsFiddle example with the code for the input with datepicker and how I set jqGrid to use that functionality: http://jsfiddle.net/rUkyF/

推荐答案

模式模式是问题所在.当您点击 modal jqGrid 时，尝试聚焦到表单的第一个 ，您会看到 jquery-ui 在 body 上附加 div日历并将其添加到模式div . 注释modal: true，以便对其进行修复.

The modal mode is the problem. When you click out the modal jqGrid try to focus to the first element of the form , as you can see jquery-ui append the div calendar on the body and its out the modal div. Comment the modal: true so fixed it.

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

http://jsfiddle.net/rUkyF/70/

这篇关于DatePicker选项“更改月份"和"changeyear"在jqGrid的编辑表单中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！