jqGrid Date Picker Automatically Pops Up

Question

I am using the PHP jqGrid with basic functionality and no javascript attached. The first time the popout box opens, everything works normally.

When I edit again, the date picker pops up automatically every time. Is this a bug?

My code is so basic, I don't know what else it could be.

Here is my code:

<?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);

$grid->SelectCommand = 'SELECT id, date, description, goal,
    type  FROM events';

$grid->table = 'events';
$grid->setPrimaryKeyId('id');
$grid->serialKey = false;
// Set output format to json
$grid->dataType = 'json';
// Let the grid create the model
$Model = array (
    array ("name" => "date"),
    array ("name" => "description"),
    array ("name" => "goal"),
    array ("name" => "type")

);
$grid->setColModel($Model);

// Set the url from where we obtain the data
$grid->setUrl('event-grid.php');
// Set some grid options
$grid->setGridOptions(array(
    "caption"=>"Events",
    "rowNum"=> 5,
    "rowList"=>array(5,10,20,30),
    "sortname"=>"date",
    "width" => 400,
    "height" => 113,
    "hoverrows" => true,
    "viewrecords" => false,
    "sortable"=>true
));

///*** Use this to define both server and user date params for date picker and field please remeber that the grid CRUD interactions are separate from jqueryui Datepicker you must integrate them together ***/
$grid->setUserTime("h:i:s");
$grid->setUserDate('Y M d');
$grid->setDbDate('Y-m-d');

$grid->setColProperty("date", array(
        "label"=>"Event Date",
        "width"=>80,
        "align"=>"center",
        "fixed"=>true,
        "formatter"=>"date",
        "formatoptions"=>array(
            "srcformat"=>"Y-m-d",
            "newformat"=>"Y M d")

//    CODE BLOCK BELOW TO USE JS DATE PICKER
//
//        "editoptions"=>array("dataInit"=>
//                "js:function($){setTimeout(function(){
//                    jQuery($).datepicker({dateFormat:'yy-mm-dd',
//                    changeMonth: true,
//                    showOn: 'both',
//                    buttonImage: 'img/83-calendar.png',
//                    buttonImageOnly: true,
//                    minDate: '-5Y',
//                    maxDate: '+5Y'});
//                    jQuery('.ui-datepicker').css({'zIndex':'1200','font-size':'75%'});},200);}")


    ));

// Set the datepicker on OrderDate field. Note that the script automatically
// converts the user date set in the jqGrid
$grid->setDatepicker('date', array("buttonIcon"=>true), true, false);
$grid->datearray = array('date');


// Enable navigator
$grid->navigator = true;
// Enable only deleting
$grid->setNavOptions('navigator', array(
    "excel"=>false,
    "add"=>true,
    "edit"=>true,
    "del"=>true,
    "view"=>false,
    "search"=>false,
    "csv" => true
    ));

$grid->setNavOptions('add', array(
    "closeAfterAdd"=>true,
    "reloadAfterSubmit"=>true
));

$grid->setNavOptions('edit', array(
    "closeAfterEdit"=>true,
    "reloadAfterSubmit"=>true
));

$grid->csvsep=",";

//$grid->debug = true;

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



?>

The code is very straight forward, exactly as seen on the demo.

$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'); 
$grid->setColProperty('EmployeeID', array("editable"=>false)); 
/* 
$grid->setColProperty('BirthDate',  
        array("formatter"=>"date", 
            "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s", "newformat"=>"Y-m-d"), 
            "editoptions"=>array("dataInit"=> 
                "js:function(elm){setTimeout(function(){ 
                    jQuery(elm).datepicker({dateFormat:'yy-mm-dd'}); 
                    jQuery('.ui-datepicker').css({'zIndex':'1200','font-size':'75%'});},100);}") 
            )); 
 *  
 */ 
$grid->setColProperty("BirthDate", array( 
    "formatter"=>"date", 
    "formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"Y M d") 
    ) 
);  

// Date options to edit 
$grid->setUserDate("Y M d"); 
$grid->setUserTime("Y M d"); 

$grid->setDatepicker('BirthDate'); 

$grid->datearray = array("BirthDate"); 

// Set some grid options 
$grid->setGridOptions(array( 
    "rowNum"=>10, 
    "scrollrows"=>true, 
    "rowList"=>array(10,20,30), 
    "sortname"=>"EmployeeID" 
)); 
$grid->navigator= true; 
$grid->setNavOptions('navigator', array("excel"=>false,"add"=>true,"edit"=>true,"del"=>false,"view"=>false, "search"=>false));
// Close the dialog after editing 
$grid->setNavOptions('edit',array("height"=>150,"dataheight"=>'auto', "closeAfterEdit"=>true)); 
$grid->setNavOptions('add',array("height"=>150,"dataheight"=>'auto',"closeAfterEdit"=>true)); 

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

Answer 1

The reason is combination of some factors. You set datepicker on the first field of the edit form, you use the option of datepicker to open on focus and jqGrid set focus on the first control in the edit form.

There are many ways to solve the problem, but if the behavior on the first opening of edit form is OK for you, then you can try just to use recreateForm: true options of editGridRow.