Another very usefull class is the Calender class, which can be used in any
input field.
We have created a method which integrates this class in jqGrid.
You will need only to set the on which field the datepicker should be lunched.
Note that the method automatically converts the user date set in jqGrid to
the appropriate datepicker format.
A various options are available.
In this example Open the edit form and you will see the datepicker icon near to
OrderDate.
<?php 
require_once '../../../../php/demo/tabs.php';
?>
<!DOCTYPE html>
<html>
  <head>
    <title>jqGrid PHP Demo</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/trirand/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../../../../css/ui.multiselect.css" />
    <style type="text">
        html, body {
        margin: 0;            /* Remove body margin/padding */
        padding: 0;
        overflow: hidden;    /* Remove scroll bars on browser window */
        font-size: 75%;
        }
        #tags {z-index: 900}
    </style>
    <script src="../../../../js/jquery.min.js" type="text/javascript"></script>
    <script src="../../../../js/trirand/i18n/grid.locale-en.js" type="text/javascript"></script>
         <script src="../../../../js/trirand/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript">         
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
    $.jgrid.defaults.width = "700";
    </script>
     
    <script src="../../../../js/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
      <div>
        <?php include ("grid.php");?>          
      </div>
      <br/>
      <?php tabs(array("grid.php"));?>
   </body>
</html>
grid.php.
<?php
require_once '../../jq-config.php';
// include the jqGrid Class
require_once ABSPATH."php/PHPSuito/jqGrid.php";
// include the driver class
require_once ABSPATH."php/PHPSuito/DBdrivers/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, Freight, ShipName FROM orders';
// set the ouput format to json
$grid->dataType 'json';
$grid->table ="orders";
$grid->setPrimaryKeyId("OrderID");
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grid.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
    
"caption"=>"Datepicker method",
    
"rowNum"=>10,
    
"sortname"=>"OrderID",
    
"hoverrows"=>true,
    
"rowList"=>array(10,20,50),
    ));
// Change some property of the field(s)
$grid->setColProperty("OrderID", array("label"=>"ID""width"=>60));
$grid->setColProperty("OrderDate", array(
    
"formatter"=>"date",
    
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"m/d/Y")
    )
);
// Set the datepicker on OrderDate field. Note that the script automatically
// converts the user date set in the jqGrid 
$grid->setDatepicker('OrderDate', array("buttonIcon"=>true), truefalse);
$grid->datearray = array('OrderDate');

// Finally set the database setting for the date
$grid->setUserTime("m/d/Y");
$grid->SetUserDate("m/d/Y");
// Enjoy
$grid->navigator true;
$grid->setNavOptions('navigator', array("search"=>false"excel"=>false));
$grid->renderGrid('#grid','#pager',truenullnulltrue,true);