Our goal is to use a datepicker for both editing and serching, but before doing this please take a look at the following help topic: configure the dates

In our case, we will use the default settings for the server and client side dates. To attach the datepicker, we will use dataInit event - either in editoptions and in searchoptions. For this purpose it is needed to enable the jqGrid navigator too. We will use this example as a starting point.

<?php
require_once 'jq-config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the driver class
require_once "php/jqGridPdo.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");

// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = 'SELECT OrderID, OrderDate, CustomerID, ShipName, Freight FROM orders';
// Set output format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "sortname"=>"OrderID"
));

// javascriptCode for the datepicker
$mydatepicker = <<<DATEPICK
function(el) 
{
   setTimeout(function(){
      jQuery(el).datepicker({dateFormat:'dd/mm/yy'});
   },200);
}
DETEPICK;

// Set the column property
$grid->setColProperty('OrderDate', array(
   "formatter"=>'date',
   "editoptions"=>array("dataInit"=>"js:".$mydatepicker),
   "searchoptions"=>array("dataInit"=>"js:".$mydatepicker)
));

// add navigator with the default properties
$grid->navigator = true;

$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>

Please, note the setTimeout javascript function in our code. The reason we are using it is that dataInit event is executed before the element is inserted to the DOM, and we need the timeout to make sure the element is attached to the DOM before proceeding with attaching the datepicker.