insert a datepicker in column of jqgrid (without jquery datepicker)

Question

I'm trying to insert a datepicker in a column of jqgrid, but the datepicker won't show. I don't why, but my question is if I can (and if it's possible how to) insert another datepicker (non jquery) or some other datepicker.

Or maybe you can help me to insert a jquery datepicker correctly. This is my code.

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 is a fiddle with the working code.

Remember the datepicker you are trying to use belongs to jQuery UI, not jQuery. So you need to include both in your project (you can download jQuery here and jQuery UI here).

I also added formatter: 'date' in the dateStart and dateEnd columns. Make sure the formatoptions fits the dateFormat in the datepicker options.

As an extra, you can see here how to implement an action column with a delete button, in case your current button is not working and you need it (I didn't use this column in my fiddle).