JqGrid, add clear button in the toolbar search column

Question

I have a JqGrid with the toolbar search enable. One of my column is a datetime column and the search field is a jquery datepicker. The problem with a datepicker is that you cannot have an empty value, but as this field is a filter it can be empty. So what id'like to do is to add a little button near the datepicker which will clear the field. Is there a way to do this, or to be able to clear the datepicker from client side.

Here is the code for the column

{ name: 'Period', index: 'Period', align: 'center', formatter: 'date', formatoptions: { newformat: 'F, Y' }, width: '70px', search: true,
                        searchoptions: {
                            dataInit: function (el) {
                                $(el).datepicker({
                                    yearRange: "-5:+1",
                                    changeMonth: true,
                                    changeYear: true,
                                    showButtonPanel: true,
                                    dateFormat: 'MM, yy',
                                    onClose: function (dateText, inst) {
                                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                                        $(this).datepicker('disable');
                                        $(this).datepicker('setDate', new Date(year, month, 1));
                                        $(this).datepicker('enable');
                                        $("#jqgCompLine")[0].triggerToolbar();
                                    },
                                    beforeShow: function (input, inst) {
                                        if ((datestr = $(this).val()).length > 0) {
                                            year = datestr.substring(datestr.length - 4, datestr.length);
                                            month = jQuery.inArray(datestr.substring(0, datestr.length - 6), $(this).datepicker('option', 'monthNames'));
                                            $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                                            $(this).datepicker('setDate', new Date(year, month, 1));
                                        }
                                    }
                                });
                            }
                        },

Thanks in advance for your help!

Answer 1

The datepicker have no problem with empty fields. I suppose it's the problem with your customization.

I don't know which data you have as the date values in the grid. The format 'F, Y' (and 'MM, yy' for the datepicker) seems me a little strange because the searching will be done by full date, but you display only the mouth and year. Probably all will work correct with your data probably not.

I created the demo to demonstrate that searching with the datepicker. During creating of the demo I used the 'j, F, Y' format (for the datepicker the 'd, MM, yy' format) and found two bugs in the parseDate method used by jqGrid internally.

The first problem are in the lines where date[k] value will be correct calculated, but not assigned to tsp.m. One should insert in both if statements the assignment tsp.m = date[k];. So both 'F' and 'M' formats works incorrect in the current code of jqGrid. Because you use 'F' format it could be important for you.

The next problem is that the 'j' format for the day will be processed in the wrong way. During the parsing of the date the tsp.j will be correctly assigned, but the tsp.d, which will be used in the line, will be not modified and stay equal to 1. To fix the code I suggest to add the line

if(tsp.j !== undefined) { tsp.d = tsp.j; }

somewhere after the for loop. The demo used the modified version jquery.jqGrid.src-parseDate.js of the jquery.jqGrid.src.js of jqGrid 4.3.1.

I will report the bug and my fix to trirand later.