Ошибка при реализации datapicker jqgrid

Я пытаюсь реализовать datapicker, но получаю эту ошибку:

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

мои библиотеки:

  <!-- 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">

мой код сетки:

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

});

это небольшой снимок из моей сетки и ошибки:

Это папка моей структуры

Я работаю как локальный и редактирую в строке, но не показываю датапикер в строке щелчка пожалуйста, любое предложение .. или в чем моя ошибка, спасибо ??