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

score 1 · Answer 1 · edited May 23 '17 at 12:21

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).

edited May 23 '17 at 12:21

Community

1
1

answered Jan 18 '14 at 17:11

Aylen

3,524
26
36

hi, thank for your answer, but that files (jquery ui and jquery) are included, one detail the datepicker works correctly in html code but not in jqgrid, maybe you know how to can include other type of datepicker in jqgrid. – APRocha Jan 20 '14 at 23:53
Did you try the code of the fiddle I made? The datepicker is working just fine in the jqGrid there, and I didn't change much of your code to make it work. – Aylen Jan 21 '14 at 02:07
sadly not work, maybe is problem of css or jquery files (maybe the version are diferent), i try to change versions or homologate the files, thanks for your answer – APRocha Jan 22 '14 at 00:22

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

1 Answers1