How to get datepicker in jqGrid search toolbar?

Question

I want to have datepicker in search text fields and eventually also in edit fields of a jqgrid.

Is there any way?

Has any one used such combination? Datepicker with jqGrid?

Answer 1

Try :

{ name: 'AWBDate', index: 'AWBDate', width: 90, align: 'left', editable: false, formatter: 'date',search: true,

            formatoptions: {
                srcformat: 'd/m/Y H:i:s',
                newformat: 'd/m/Y'
            },
            sorttype:"date",
            searchoptions: {
                sopt: ['eq'],
                dataInit: function (elem) {
                    $(elem).datepicker({
                        dateFormat: 'dd/mm/yy',
                        changeYear: true,
                        changeMonth: true,                            
                        showWeek: true,
                        onSelect: function (dateText, inst) {
                            setTimeout(function () {
                                $('#jQGridapproval')[0].triggerToolbar();
                            }, 100);
                        }
                    });
                }
            }
        },

Answer 2

This code worked for me.

colModel: [ 
    {
        name: 'created_at',
        index: 'Creation Date',
        search: true,
        searchoptions: {
            sopt: ['eq'],
            dataInit: function(e) {
                $(e).datepicker({
                        dateFormat: 'yy-mm-dd'
                    })
                    .change(function() {
                        $("#list2")[0].triggerToolbar();
                    });
            }
        }
    },
]

$("#list2") is the jqgrid table selector.

Answer 3

I found the way:

It is hidden somewhere deep in the documentation:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config

Answer 4

You will do following in field definition,

colModel: [{ name: 'Start', index: 'Start', searchoptions: { sopt: ['eq', 'ne'], 
dataInit: function (elem) { $(elem).datepicker({ showButtonPanel: true }) } } },

Answer 5

colModel:[
    { name: "DateFrom", width: 110, index: 'DateFrom', search: true,
        searchoptions: {      dataInit: function(el) {
            $(el).datepicker({
                changeYear: true,
                changeMonth: true,
                showButtonPanel: true,
                dateFormat: 'dd-mm-yy'
            });
        }
        }
    }
]