CODEWITHSUNDEEP
jqueryjqgrid
NewHistoricForm
NewHistoricForm

Reputation: 121

Datepicker is not showing in jqGrid edit form fields

I have jqgrid installed and everything is working great only that the date picker does not show up on the edit form. i have it set u where I double click on a row it opens the edit form but the datepicker does not show? Any ideas? Here is my head info. 

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.10.3.custom.min.css" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/nhf.css" />


<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 95%;
}
</style>

<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

I get a warning in firebug that "TypeError: $(...).datepicker is not a function" . What I'm doing wrong?Thanks

<script type="text/javascript">
$(function(){ 
  $("#list").jqGrid({
    url:'request.php',
    datatype: 'xml',
    mtype: 'GET',
    height: 350,
    colNames:['id','Project', 'Assigned To','Assign Date','Check Date','Due Date','Attachments'],
    colModel :[ 
      {name:'id', index:'id', width:20}, 
      {name:'name', index:'name', width:200, align:'left',editable:true, editoptions:{
            size:70} }, 
      {name:'id_continent', index:'id_continent', width:80, align:'right',editable:true,edittype:'select', 
      editoptions:{value: "Henry:Henry; Ramon:Ramon; Paul:Paul" }  }, 

      {name:'lastvisit', index:'lastvisit', width:70, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y',editable:true, edittype: 'text', }, 
      {name:'cdate', index:'cdate', width:80, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y', edittype: 'text',editable:true , editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } }, 
      {name:'ddate', index:'ddate', width:80, align:'right',formatter: 'date',srcformat:'yyyy-mm-dd',newformat: 'm-d-Y',date:'true',editable:true, edittype: 'text',}, 
      {name:'email', index:'email', width:80,align:'center',sortable:false} 
    ],
    pager: '#pager',
    rowNum:20,
    rowList:[20,40,80],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Pending Assignements', 
    ondblClickRow: function(rowid) {

    jQuery(this).jqGrid('editGridRow', rowid,
                        {width:500,Height:400,recreateForm:true,closeAfterEdit:true,
                         closeOnEscape:true,reloadAfterSubmit:false});
}

    }); });

Upvotes: 1

Views: 5448

Answers (2)

Swati Pisal
Swati Pisal

Reputation: 551

refer this link http://www.trirand.com/blog/phpjqgrid/examples/integrations/datepicker/default.php

i had used ui.datepicker.css" and ui.datepicker.js therefore it was not working after removing this it is working fine.

use require_once ABSPATH."php/jqCalendar.php";

Upvotes: 0

jmm
jmm

Reputation: 990

In the html you pasted above, I don't see a link to the jquery-ui javascript file.

Upvotes: 1

Related Questions