jqgrid inline edit not working with datepicker column

Question

I have implemented jqGrid as shown in following link:- http://www.guriddo.net/demo/guriddojs/integrations/inline_edit_controls/index.html

By default, when user modifies any value and press enter the row is saved and exit the editing mode. But this doesn't work with the column with datetime picker.

To replicate, Click Order Date column in above demo, select any date and try to press enter. This doesn't work. but works well if you change any other column.

I tried to set focus to the element but didn't work.

Answer 1

You can change the code of dataInit

dataInit: function (element) {
    $(element).datepicker({
        id: 'orderDate_datePicker',
        dateFormat: 'M/d/yy',
        //minDate: new Date(2010, 0, 1),
        maxDate: new Date(2020, 0, 1),
        showOn: 'focus'
    });
}

by adding onSelect callback ,which can be about the following

dataInit: function (elem) {
    var rowid = $(elem).closest("tr.jqgrow").attr("id");
    $(elem).datepicker({
        dateFormat: "dd-M-yy",
        autoSize: true,
        changeYear: true,
        changeMonth: true,
        showButtonPanel: true,
        showWeek: true,
        onSelect: function () {
            if (event != null && event.keyCode === 13) {
                $(elem).datepicker("hide");
                $grid.jqGrid("saveRow", rowid);
            } else {
                setTimeout(function () {
                    $(elem).focus();
                }, 50);
            }
        }
    });
}