Datepicker Icon Not Showing

QuestionsDatepicker Icon Not Showing
Rick Stevens asked 9 years ago

I have a full license, and the datepicker seems to work correctly, but it displays a button instead of the calendar icon. I have compared my code to the demo and cannot find the issue.

You can view the problem here: http://sonoma-dev.webreliance.com/grid_orderattachments.php?id=DF53D7BC-6AF6-4E88-811C-C223B821CCA0

Click to add a record and you'll see the form shows a Calendar button instead of the icon.

Here is my php code:

<?php include '_db.php' ?>

<?php
// include and create object
include("lib/inc/jqgrid_dist.php");
$g = new jqgrid($db_conf);

// set few params
$grid["caption"] = "asdf";
$grid["autowidth"] = true;
$grid["height"] = "175";
$grid["form"]["position"] = "center"; // position form dialog to center
$grid["form"]["nav"] = true; // show form navigation
$grid["export"] = array("format"=>"pdf", "filename"=>"my-file", "heading"=>"Invoice Details", "orientation"=>"landscape", "paper"=>"a4");
$grid["add_options"]["jqModal"] = false;
$grid["edit_options"]["jqModal"] = false;
$g->set_options($grid);

$g->set_actions(array(
"add"=>true, // allow/disallow add
"edit"=>true, // allow/disallow edit
"delete"=>true, // allow/disallow delete
"rowactions"=>true, // show/hide row wise edit/del/save option
"export"=>true,
"search" => "advance", // show single/multi field search condition (e.g. simple or advance)
"showhidecolumns" => false
)
);
//$g->set_actions(array("delete"=>true, "add"=>true, "edit"=>true));

// set database table for CRUD operations
$g->table = "data_Attachment";

// subqueries are also supported now (v1.2)
$orderguid = $_GET["id"];
$orderid = GetOrderID(&$dbhandle, $orderguid);
$sql = "select attachmentguid, orderid, attachdate, description, origfilename, filename, createuser, modifyuser, modifydate from data_Attachment where orderid = '" . $orderid . "' ";
$g->select_command = $sql;

$col = array();
$col["title"] = "Attachment ID"; // caption of column
$col["name"] = "attachmentguid"; // grid column name, same as db field or alias from sql
$col["width"] = "10"; // width on grid
$col["hidden"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "orderid";
$col["name"] = "orderid";
$col["editable"] = true;
$col["editoptions"] = array("defaultValue"=>$clientid, "recreateForm"=>true);
$col["show"] = array("list"=>false,"edit"=>false,"add"=>false);
$cols[] = $col;

$col = array();
$col["title"] = "createuser";
$col["name"] = "createuser";
$col["editable"] = true;
$col["editoptions"] = array("defaultValue"=>$currentuserid, "recreateForm"=>true);
$col["show"] = array("list"=>false,"edit"=>false,"add"=>false);
$cols[] = $col;

$col = array();
$col["title"] = "modifyuser";
$col["name"] = "modifyuser";
$col["editable"] = true;
$col["editoptions"] = array("defaultValue"=>$currentuserid, "recreateForm"=>true);
$col["show"] = array("list"=>false,"edit"=>false,"add"=>false);
$cols[] = $col;

$col = array();
$col["title"] = "modifydate";
$col["name"] = "modifydate";
$col["editable"] = true;
$col["editoptions"] = array("defaultValue"=>date('Y-m-d H:i:s'), "recreateForm"=>true);
$col["show"] = array("list"=>false,"edit"=>false,"add"=>false);
$cols[] = $col;

$col = array();
$col["title"] = "Date";
$col["name"] = "attachdate";
$col["width"] = "150";
$col["editable"] = true; // this column is editable
$col["editoptions"] = array("size"=>4); // with default display of textbox with size 20
$col["editrules"] = array("required"=>true, "edithidden"=>true); // and is required
# format as date
$col["formatter"] = "date";
# opts array can have these options: http://api.jqueryui.com/datepicker/
$col["formatoptions"] = array("srcformat"=>'Y-m-d',"newformat"=>'d.m.Y', "opts" => array("changeYear" => false));

$col["link"] = "http://localhost/?id={id}"; // e.g. http://domain.com?id={id} given that, there is a column with $col["name"] = "id" exist
$col["linkoptions"] = "target='_blank'"; // extra params with <a> tag
$cols[] = $col;

$col = array();
$col["title"] = "Description";
$col["name"] = "description";
$col["width"] = "10";
$col["resizable"] = true;
$col["editable"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "File";
$col["name"] = "origfilename";
$col["width"] = "10";
$col["resizable"] = true;
$col["editable"] = true;
$cols[] = $col;

$g->set_columns($cols);

// render grid
$attachout = $g->render("attachmentlist");

?>
<?php include '_scripts.php' ?>
<?php echo $attachout; ?>

2 Answers
Abu Ghufran answered 9 years ago

Try swapping JS files positioning, include grid and jquery-ui files at end.

<script src="/lib/js/jquery.min.js?v=0.03" type="text/javascript"></script>
<script src="/lib/js/jquery.maskedinput.js?v=0.03" type="text/javascript"></script>
<script src="/scripts//scripts.js?v=0.03" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js?v=0.03"></script>
<script src="/scripts/jquery.cookie.js?v=0.03"></script>

<script src="/lib/js/jqgrid/js/i18n/grid.locale-en.js?v=0.03" type="text/javascript"></script>
<script src="/lib/js/jqgrid/js/jquery.jqGrid.min.js?v=0.03" type="text/javascript"></script>
<script src="/lib/js/themes/jquery-ui.custom.min.js?v=0.03" type="text/javascript"></script>

If using bootstrap lib, you should include this compatibility css for better display. Refer demos/appear/twitter-bootstrap.php
<link rel="stylesheet" type="text/css" media="screen" href="../../lib/js/jqgrid/css/ui.bootstrap.jqgrid.css">

Rick Stevens answered 9 years ago

That fixed it. Thank you for the quick response.

Your Answer

2 + 10 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?