Date-picker in jqGrid, simple example?

Question

Does anyone know of an example of adding the jquery UI DatePicker (or some other perhaps) in the jqGrid? I'm trying to get it to work for an inline edit grid.

I have found a few examples, but nothing works. I would like something really simple!

My Grid setup (don't know if it's nessecary for this question):

    $(function () {
    var lastsel;
    $("#list").jqGrid({
        url: '@Url.Action("ExampleData", "Home")',
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Namn', 'Födelsedag', 'Adress', 'Stad'],
        colModel: [
          { name: 'Name', index: 'Name', width: 130, editable: true },
          { name: 'Birthday', index: 'Birthday', width: 80, editable: true },
          // DatePicker for birthday 

          { name: 'Address', index: 'Address', width: 180, editable: true },
          { name: 'City', index: 'City', width: 80, editable: true },
        ],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: 'Name',
        sortorder: 'desc',
        viewrecords: true,
        gridview: true,
        width: 700,
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('saveRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: '@Url.Action("Incoming", "Home")',
        caption: 'Kontaktpersoner'
    });

    jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: true });
    jQuery("#list").jqGrid('inlineNav', "#pager");

Solution 1

As you can read in jqGrid documentation there is a dataInit option for this. What you should remember that this event is raised before the element is inserted into DOM, so use setTimeout just to be safe:

{ name: 'Birthday', index: 'Birthday', width: 80, editable: true editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } },

Solution 2

The simplicity of the code depend of the format of the data which you fill in the 'Birthday' column. What you mostly need is to include

editoptions: { dataInit: function (elem) { $(elem).datepicker(); } }

as additionally property of 'Birthday' column. Sometimes one need define onSelect callback for the datepicker (see here), sometime one need to use setTimeout additionally or make some other customizations (see the answer) which includes working demos.