Inline editing is another editing mode of jqGrid. To invoke inline editing, just call the client-side jqGrid editRow method.

In this particular example, we are using the build in formatter "actions" which call editRow on the client-side jqGrid.
We can use the direct method setDatepicker.

Note that the datepicker in colModel can be created with dataInit event. The event occur when the element is created and is ideal
for initial bindings and etc.

Please, refer to the PHP tab for the javascript sample.
<?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%;
        }
        
    </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 EmployeeID, FirstName, LastName, BirthDate FROM employees';
// Set the table to where you add the data
$grid->table = 'employees';
// 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');
// add a action column and instruct the formatter to create the needed butons
// for inline editing
$grid->addCol(array(
    "name"=>"actions",
    "formatter"=>"actions",
    "editable"=>false,
    "sortable"=>false,
    "resizable"=>false,
    "fixed"=>true,
    "width"=>60,
    // use keys to save or cancel a row.
    "formatoptions"=>array("keys"=>true)
    ), "first");
$grid->setColProperty('EmployeeID', array("editable"=>false, "width"=>50, "label"=>"ID"));
$grid->setColProperty('BirthDate', 
        array("formatter"=>"date",
            "formatoptions"=>array("reformatAfterEdit"=>true, "srcformat"=>"Y-m-d H:i:s", "newformat"=>"Y-m-d")
        )
);
// We need to configure the server dates. Call it before datepicker
$grid->setUserDate("Y-m-d");
$grid->setDbDate("Y-m-d H:i:s");
$grid->setUserTime("Y-m-d");

// Use the direct method to set a date picker
$grid->setDatepicker('BirthDate');

// Bellow is a old method. In this case you can do other thing in datainit
/*
$grid->setColProperty('BirthDate', array(
// Ok. We use some trick here to create the datepicer on dataInit event
// when the element is created. Note the js: before the function.
// this instruct the grid to put a javascript code without additional formating
            "editoptions"=>array("dataInit"=>
                "js:function(elm){setTimeout(function(){
                    jQuery(elm).datepicker({dateFormat:'yy-mm-dd'});
                    jQuery('.ui-datepicker').css({'font-size':'75%'});
                },200);}")
 ));
 * 
 */

// Set some grid options
$grid->setGridOptions(array(
    "rowNum"=>10,
    "rowList"=>array(10,20,30),
    "sortname"=>"EmployeeID"
));
// Enjoy
$grid->renderGrid('#grid','#pager',true, null, null, true,true);