jQuery UI Datepicker search on select

As you know the jQuery UI Datepicker can be easy integrated in Guriddo jqGrid when we need to insert and search date information. While entering a date in edit form does not have any performance problem, it is quite difficult when we use it in search mode – especially in toolbar search. The problem that appear can be easy described with this forum post .

Fortunately the jQuery UI Datepicker has a events which can be used to solve the problem. In this case we will use two Datepicker events – onSelect and onClose.

The idea is to use onSelect event, where we can trigger the search. The onClose event is optional depending on the need – we can close the datepicker after selecting the date (default) or we can instruct it to stay open in order to select new date. Both approaches will be described in this article. Let’s begin.

We need to define the onClose event in datepicker definition, where we will trigger the toolbar search.

This can be done in dataInit event in searchoptions of date field like this:

[js]
colModel : [
…
"dataInit":function(el) {
setTimeout( function(){
if(jQuery.ui) {
if(jQuery.ui.datepicker) {
jQuery(el).datepicker({
"onSelect":function( date, dp) {
$("#grid")[0].triggerToolbar();
}
});
}
}
},
100)
},
…
]
[/js]

The line $("#grid")[0].triggerToolbar(); triggers the toolbar search function and a search is performed when a date is selected. Again with this the datepicker is closed.

If there is a need not to close the datepicker after selecting a date and performing a search, we need to instruct it not to close. This can be done with the command :


(this).data('datepicker').inline = true;


which should be added in onSelect event. This command instruct datepicker to behave as inline one. In order to save the previous functionality we need to set this option back when the datapicker is closed – i.e to add

(this).data('datepicker').inline = false;

in onClose event.

Below is the full code where the datepicker is attached to a RequiredDate field

[js]
$("#grid").jqGrid({
…
colModel: [
…
{
"name":"RequiredDate",
"index":"RequiredDate",
"searchoptions":{
"sopt":["eq"],
"dataInit":function(el) {
setTimeout( function(){
if(jQuery.ui) {
if(jQuery.ui.datepicker) {
jQuery(el).datepicker({
"onSelect":function( date, dp) {
$("#grid")[0].triggerToolbar();
/* comment the line below if a need to close the datepicker after select*/
(this).data(‘datepicker’).inline = true;
},
"onClose":function(){
$(this).data(‘datepicker’).inline = false;
}
});
}
}
},
100)
}
}
},
…
]
…
});
jQuery(‘#grid’).jqGrid(‘filterToolbar’,{"stringResult":true,"searchOperators":true});
[/js]

The associated PHP code is:
[php]
$grid->setColProperty("RequiredDate", array(
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y"),
"searchoptions"=>array("sopt"=>array("eq"))
)
);
$triggerdp = <<< TRIGGER
js:function( date, dp)
{
$("#grid")[0].triggerToolbar();
(this).data(‘datepicker’).inline = true;
}
TRIGGER;
$closedp = <<< CLOSEDP
js:function(){
$(this).data(‘datepicker’).inline = false;
}
CLOSEDP;

$grid->setDbDate("Y-m-d H:i:s");
$grid->setUserDate("m/d/Y");
$grid->datearray= array("RequiredDate");
$grid->setDatepicker(‘RequiredDate’, array(
"onSelect"=>$triggerdp,
"onClose"=>$closedp
));
…
$grid->toolbarfilter = true;
$grid->setFilterOptions(array(
"stringResult"=> true,
"searchOperators"=>true
));
…
[/php]

Working PHP example can be seen here

Enjoy
The Trirand Team