working jqGrid Example

HTML

<table id="grid"></table>
<div id="pager"></div>

JavaScript

$("#grid").jqGrid({
    datatype: "local",
    colNames: ['Id', 'Date1', 'Date2'],
    colModel: [{
        name: 'id',
        index: 'id',
        editable: false
    }, {
        name: 'date1',
        index: 'date1',
        formatter: 'date',
        editable: true,
        editoptions: {
            dataInit: function (element) {
                $(element).datepicker();
            }
        }
    }, {
        name: 'date2',
        index: 'date2',
        formatter: 'date',
        editable: true,
        editoptions: {
            dataInit: function (element) {
                $(element).datepicker();
            }
        }
    }],
    pager: '#pager'
}).jqGrid('navGrid', '#pager', {
    add: true,
    edit: true,
    del: true,
    search: false,
    refresh: false
},
updateDialog('update'),
updateDialog('insert'),
updateDialog('delete'));

function updateDialog(action) {
    return {
        url: '',
        modal: true,
        width: '300'
    };
}