在 jqgrid 的列中插入一个 datepicker（没有 jquery datepicker）

Question

我正在尝试在 jqgrid 的列中插入一个 datepicker，但 datepicker 不会显示。我不知道为什么，但我的问题是我是否可以（以及是否可以）插入另一个日期选择器（非 jquery）或其他一些日期选择器。

或者你可以帮我正确插入一个 jquery datepicker。这是我的代码。

container.jqGrid({
    width: 440,
    height: 260,
    colNames:[ "Id", "Combustible", "Factor", "Fecha Inicio", "Fecha Fin", "Borrar"],
    colModel : [
        {name: 'idproduct', index: 'idproduct', width: 25, sortable: false, align: 'center', editable: true, editoptions:{maxlength:5}},
        {name: 'fuel',  index : 'fuel',  width : 60,    sortable: false, align: 'center', editable: true, edittype:"select", editoptions:{value:"1:Magna;2:Premium;3:Diesel"} },
        {name: 'factor', index : 'factor',  width : 30, sortable: false, align: 'center'  , editable: true, editoptions:{maxlength:5} },
        {name: 'dateStart', index : 'dateStart',  width : 60,   sortable: false, align: 'right', editable: true, editoptions: { size: 20, maxlengh: 10,
                dataInit: function(element) 
                         { $(element).datepicker({ dateFormat: 'yy/mm/dd',        constrainInput: false, showOn: 'button', buttonText: '...' });
                         } } 
        },

        {name: 'dateEnd', index : 'dateEnd',  width : 60,   sortable : false, align: 'right', editable:true, 
         editrules: { date: true, minValue: 0 }, datefmt: 'yy-mm-dd' },
        {name: 'delButton',  index: 'delButton',  width: 40,  sortable: false, align: 'center'}
    ],
    pager: containerPager, 
    pgbuttons: false, 
    pginput:false,
    viewrecords: false,
    rowNum: 0,
    rowList: 0,
    pgtext: "",
    caption: "Promociones Hora Feliz",
    loadGrid: true,
    loadComplete: function()
    {
        var ids = container.getDataIDs();
        for(var i=0; i<ids.length; i++)
        {
            var cl = ids[i];
            delButton = "<center><div class=\"ui-state-error-text ui-corner-all \" style=\"height:16px; width:16px; margin: 2px; cursor: pointer; \" " +
                " title=\"Borrar Registro\" onclick=\"$(\'#" + container.attr("id") +"\').delRowData('"+cl+"');\">"+
                "<span class=\"ui-icon ui-icon-circle-close\" style=\"float: left; margin-right: .3em;\"></span>"+
                "</div></center>"
            container.setRowData( ids[i], { delButton:delButton } );
        }
    },

    afterEditCell: function(rowid,celname,value,iRow,iCol) {
        $("#" + iRow + "_factor").numericFloat();
        $("#" + iRow + "_idproduct").numericFloat();
    },

    afterSaveCell: function(rowid, celname, value, iRow, iCol)
    { 
        var rangesPoints = [];  
        var ids = container.getDataIDs();
        $.each(ids,function(id,value){
            var retx = container.getRowData( value +"");
            var rangesPointTmp = [];
            rangesPointTmp[0] = parseInt( retx.idproduct );
            rangesPointTmp[1] = retx.fuel;
            rangesPointTmp[2] = parseFloat( retx.factor );

            rangesPointTmp[3] = retx.dateStart;
            rangesPointTmp[4] = retx.dateEnd;;

            rangesPoints.push(rangesPointTmp);
        });

    },
    onSelectRow: function(id){},
    cellEdit: true,
    cellsubmit: 'clientArray'
}).navGrid( containerPager.attr("id") ,{edit:false,add:false,del:false, search:false })
.toolBarButtonAdd({
    caption:"Agregar", 
    buttonimg:"ui-icon-plus",
    onClickButton: function(){
        if( ! container.getGridParam("records") )
        {
            nextId +=1;
        }
        else{
            var ids = container.getDataIDs();
            nextId = parseInt( ids[0] );
            var retx = container.getRowData( nextId +"");

            if( parseFloat(retx.factor) == 0 || parseFloat(retx.idproduct) == 0)
            {
                showErrorMessageDialog({message:"Existen datos no validos"});
                return false;
            }

            nextId +=1;
        }
        var datarow = {
            idproduct: "",
            fuel: "",
            factor: "",
            dateStart: "",
            dateEnd: "",
            delButton :"<center><div  class=\"ui-state-error-text\"  style=\"height:16px; width:16px; margin: 2px; cursor: pointer; \" " +
                " title=\"Borrar Registro\" onclick=\"$(\'#" + container.attr("id") +"\').delRowData('"+ nextId +"');\"> " +
                "<span class=\"ui-icon ui-icon-circle-close\" style=\"float: left; margin-right: .3em;\"></span>" +
                "</div></center>"
        };
        var su=container.addRowData( nextId, datarow, 'first');
    },
    position: "last"
});

Answer 1

Here 是对工作代码的摆弄。

请记住，您尝试使用的日期选择器属于 jQuery UI，而不是 jQuery。所以你需要在你的项目中包含这两者（你可以在这里下载 jQuery here 和 jQuery UI）。

我还在 dateStart 和 dateEnd 列中添加了formatter: 'date'。确保 formatoptions 适合日期选择器选项中的 dateFormat。

另外，您可以查看here 如何使用删除按钮实现操作列，以防您当前的按钮不起作用而您需要它（我没有在我的小提琴中使用此列）。