Search code examples
javascriptjqgriddatapicker

error on implement datapicker jqgrid

i'm try implement datapicker but get this error:

TypeError: $(...).datepicker is not a function

my librarys:

  <!-- for datapicker -->
    <script src="{% static 'jquery-ui/jquery-1.12.4.js' %}"></script>
    <script src="{% static 'jquery-ui/jquery-ui.js' %}"></script>
    <script src="{% static 'jquery-ui/datepicker.js' %}"></script>
    <link href="{% static 'jquery-ui/jquery-ui.css' %}" rel="stylesheet">
<!-- for jqgrid-->
<script src="{% static 'jqgrid/js/i18n/grid.locale-es.js' %}"></script>
<script src="{% static 'jqgrid/js/jquery.jqGrid.min.js' %}"></script>
<link href="{% static 'jqgrid/css/ui.jqgrid.css' %}" rel="stylesheet">
<link href="{% static 'jqgrid/css/jquery-ui.css' %}" rel="stylesheet">

my grid code :

    var mydata =
    [
        { detalle: "comprar uniformes", plazo: "2007-10-01", responsable: "Diego Avila" },
    ]

$("#grid_plan_accion").jqGrid({
    datatype: 'json',
    data: mydata,
    colNames: ['example1', 'example2', ' example3'],
    colModel: [
        { label: 'detalle', name: 'detalle', width: 150, sorttype: "string", editable: true },
        { label: 'plazo', name: 'plazo', width: 150, sorttype: "string", editable: true, edittype:"text", 
        editoptions: {
            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
            // use it to place a third party control to customize the toolbar
            dataInit: function (element) {
                $(element).datepicker({
                    id: 'orderDate_datePicker',
                    //dateFormat: 'M/d/yy',
                    dateFormat: 'yy/M/d',
                    //minDate: new Date(2010, 0, 1),
                    maxDate: new Date(2020, 0, 1),
                    showOn: 'focus'
                });
            }
        }
        },
        { label: 'responsable', name: 'responsable', width: 150, sorttype: "string", editable: true },
    ],
    rowNum: 10,
    width:750,
    height: 100,
    shrinkToFit: true,
    pager: '#pager_plan_accion',
    editurl: "clientArray",
    onSelectRow: function(id){
        var lastSel="";
        if(id && id!==lastSel){ 
           jQuery('#grid_plan_accion').restoreRow(lastSel); 
           lastSel=id; 
        }
        jQuery('#grid_plan_accion').editRow(id, true); 
    },

});
for (var i = 0; i <= mydata.length; i++)
    jQuery("#grid_plan_accion").jqGrid('addRowData', i + 1, mydata[i]);

});

this is a little capture from my grid and error: capture

This is my structure folder

structure i'm working as local and edit in line, but dont show datapicker on click row please any suggest.. or what is my error , thanks ??

Solution

  • You have some mistakes in the code:

    1. You definition of the JS libs and css are not correct.

    First you include jquery-ui.js, which module contain datapicker already (in case you use the full download). It is not needed to include jquery-ui/datepicker.js it doubles the code. Moreover you include the jquery css two times and the second path does not exists as can be seen. To solve the problem, be a sure you have downloaded the full jQuery UI and do

    <script src="{% static 'jquery-ui/jquery-1.12.4.js' %}"></script>
<script src="{% static 'jquery-ui/jquery-ui.js' %}"></script>
<link href="{% static 'jquery-ui/jquery-ui.css' %}" rel="stylesheet">
<!-- for jqgrid-->
<script src="{% static 'jqgrid/js/i18n/grid.locale-es.js' %}"></script>
<script src="{% static 'jqgrid/js/jquery.jqGrid.min.js' %}"></script>
<link href="{% static 'jqgrid/css/ui.jqgrid.css' %}" rel="stylesheet">
    1. The second error is that you use data grid parameter with maydata array to fill the grid automatically and second time you call addowdata to insert again this data.

    Be a sure that the modules you load have correct paths too.