Jquery UI DatePicker In a JQGrid

问题

I am trying to use a datepicker when editing a cell in a JQGrid. When I click in the cell it does change to a text box and the datepicker does display, but after selecting a date I get the following error thrown

Microsoft JScript runtime error: Missing instance data for this datepicker

Here is the code for the JQGrid

    var saverow = 0;

var savecol = 0;
$("#requestTable").jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',
    altRows: 'true',
    colNames: ['id', 'Request Date', 'Name', 'HomePhone', 'Address', 'Contact Date(edit)', 'Email'],

    colModel: [
                { name: 'Id', index: 'Id', hidden: true },
                { name: 'RequestDate', index: 'RequestDate', width: 100 },
                { name: 'FullName', index: 'FullName', width: 125, sortable: false },
                { name: 'HomePhone', index: 'CabinetColor', width: 90, sortable: false },
                { name: 'FullAddressString', index: 'ShellColor', width: 260, sortable: false },
                { name: 'DealerContactDate', index: 'DealerContactDate', width: 105, editable: true,
                    editoptions: {
                        dataInit: function (element) {
                            $(element).blur(function () {
                                $("#requestTable").jqGrid("saveCell", saverow, savecol);
                                $("#requestTable").jqGrid("restoreCell", saverow, savecol);
                                $("#requestTable").trigger("reloadGrid");
                            });
                            $(element).datepicker({
                                onSelect: function (dateText, inst) {
                                    $("#requestTable").jqGrid("saveCell", saverow, savecol);
                                }
                            });

                        }
                    }

                },
                { name: 'Email', index: 'Email', width: 110, sortable: false }

            ],
    cellEdit: true,
    pager: '#pager',
    rowNum: 50,
    rowList: [25, 50, 75, 100],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    height: "100%",
    cellurl: cellurl,
    afterEditCell: function (id, name, val, IRow, ICol) {
        saverow = IRow;
        savecol = ICol;
    }

});

Any thoughts why I am getting this error? Thanks!

回答1:

Can you please check your textbox "id"?. It should contains any space or any unsupported characters may cause issue jquery selector, hence it throws the reported exceptions in date selection.

来源：https://stackoverflow.com/questions/8346986/jquery-ui-datepicker-in-a-jqgrid