Question

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

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

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

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.

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.

Any ideas?

Thanks

UPD

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

UPD2

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/

Answer 1

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/