Диапазон дат в JqGrid

Мне нужно получить отфильтрованные строки в моем jqgrid, отфильтровав даты с помощью элемента DateRangePicker.

Мне не нужно окно фильтра.

Это мой jsfiddle jqgrid code для того же. Он работает только для одной даты, но не для диапазона дат.

<script type="text/javascript">
//<![CDATA[
    jQuery(document).ready(function () {
        var mydata = [
            {id:"1", invdate:"2015-10-01",name:"test",  note:"note",  amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"2", invdate:"2015-10-02",name:"test2", note:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"3", invdate:"2015-09-01",name:"test3", note:"note3", amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"4", invdate:"2015-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"5", invdate:"2015-10-05",name:"test5", note:"note5", amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"6", invdate:"2015-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"7", invdate:"2015-10-04",name:"Test7", note:"note7", amount:"200.00",tax:"10.00",total:"210.00"},
            {id:"8", invdate:"2015-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",total:"320.00"},
            {id:"9", invdate:"2015-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",total:"430.00"},
            {id:"10",invdate:"2015-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",total:"530.00"},
            {id:"11",invdate:"2015-09-08",name:"Test11",note:"note11",amount:"500.00",tax:"30.00",total:"530.00"},
            {id:"12",invdate:"2015-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
        ];

var myGrid = $("#list");
myGrid.jqGrid({
datatype: "local",
data: mydata,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
      {name:'id',index:'id', width:65, sorttype: 'int'},
      {name:'invdate',index:'invdate', width:120, align:'center', sorttype:'date',
         formatter:'date', formatoptions: {newformat:'m/d/Y'},
         searchoptions: {
            sopt: ['eq','ne'],
            dataInit : function (elem) {
                   $(elem).daterangepicker({ 
                    dateFormat:'m/d/y', 
                    onClose: function(event) {
                           //$("#list")[0].triggerToolbar();
                           $('#list').trigger('reloadGrid');
                    }                                               
         });  
}}},
   {name:'name',index:'name', width:90},
                    {name:'amount',index:'amount', width:70, formatter:'number', align:"right"},
                    {name:'tax',index:'tax', width:60, formatter:'number', align:"right"},
                    {name:'total',index:'total', width:60, formatter:'number',align:"right"},
                    {name:'note',index:'note', width:100, sortable:false}
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#pager',
                ignoreCase:true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: "desc",
                caption:"Sorting and paging of local data",
                height: "100%"
            }).jqGrid('navGrid','#pager',{add:false,edit:false,del:false});
            myGrid.filterToolbar();
        });
    //]]>
    </script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"/>
</body>

I also noticed in my jsfiddle, after we select values in datearangepicker calendar, I have to press Enter to filter the values in grid. Though we have some code in my onClose method of daterangepicker like below 

 dataInit : function (elem) {
         $(elem).daterangepicker({ 
             dateFormat:'m/d/y', 
              onClose: function(event) {
                   $('#list').trigger("reloadGrid",[{page:1}]);
              }
         });
 }

1) при нажатии поля ввода фильтра для даты я вижу календарь и могу выбрать диапазон дат. то есть 1.10.15 - 10.10.15. Но с этим вводом появляется только одна строка даты 10/1/15. Результат не появляется между 10/1 - 10/10.

2) После выбора дат сетка не обновляется с помощью приведенного ниже кода.

$("#list")[0].triggerToolbar();
$('#list').trigger('reloadGrid');

Может ли кто-нибудь помочь, пожалуйста. Спасибо


javascript jquery daterangepicker jqgrid
person Jaikrat    schedule 09.10.2015    source источник
comment
Ваша скрипка не работает? не вижу ни значков daterangepicker, ни значков панели инструментов. Они у вас есть?   -  person Jai    schedule 09.10.2015
comment
Он находится не рядом с полем ввода даты, а внизу страницы. Ниже сетки.   -  person Jaikrat    schedule 09.10.2015
comment
Да, я проверил на другой машине. Это не работает. Я могу открыть файл datepickerjs на своем компьютере, а не на другом компьютере это говорит forbidden   -  person Jaikrat    schedule 09.10.2015
comment
Когда вы попробуете в своем jsfiddle, не могли бы вы попробовать удалить datepicker.js из моего кода и добавить этот. filamentgroup.com/examples/daterangepicker/   -  person Jaikrat    schedule 09.10.2015
comment
Что вы имеете в виду с Что !!! Ни один. Никто?. Stackoverflow не платит ни цента за ответы на вопросы. Если кто-то в мире помогает вам проводить его личное время, вы не должны оказывать давление на людей. Не стоит ожидать, что люди сразу же начнут решать вашу проблему сразу после публикации вашего вопроса. Чем больше я публикую ответов о jqGrid, тем больше людей видят, что я должен отвечать на каждый вопрос и тратить свое время на выполнение своей работы. Вы даже не тратите свое время на контроль URL-адресов, которые вы публикуете. Некоторые URL-адреса из демонстрации " делают URL-адрес неверным.   -  person Oleg    schedule 09.10.2015
comment
Вы не должны использовать reloadGrid внутри обработки onClose. Вместо этого я бы рекомендовал вам использовать триггер "change" для elem или вызвать метод triggerToolbar ($("#grid")[0].triggerToolbar();) так же, как в ответе например   -  person Oleg    schedule 09.10.2015
comment
triggerToolbar — моя вторая проблема. 1-й сравнивает даты в диапазоне.   -  person Jaikrat    schedule 09.10.2015
comment
пожалуйста, используйте префикс @Oleg в комментариях, если более одного человека написали вам комментарии. Что вы имеете в виду с моим вторым вопросом и со сравнением дат в Range. Пожалуйста, изложите более четко, что вам нужно реализовать. Вы можете вызвать clearToolbar, чтобы очистить фильтр и перезагрузить сетку, или вы можете вызвать triggerToolbar, чтобы применить текущий фильтр. Что вам нужно?   -  person Oleg    schedule 09.10.2015
comment
@Олег, я обновил свой пост. Добавлен полный код, так как я не знаю, почему мой jsfiddle не работает для других людей. Пожалуйста, скажите мне, если есть что-нибудь, что вы хотите. Я застрял с какой-то другой работой, поэтому не мог ответить вовремя. Простите за это.   -  person Jaikrat    schedule 09.10.2015
comment
Я сообщил вам, что jsfiddle.net/jaikratsingh/s2khufqr не работает, потому что вы использовали "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/redmond/jquery-ui.css (с " в начале). Кроме того, вы используете ретро-версию jQuery (1.4.4), jQuery UI (1.8.9) и jqGrid (3.8.2). Старые версии действительно нужны? Код fsfiddle установлен postData.filters. Он должен дополнительно установить search: true и активировать reloadGrid вместо triggerToolbar (поскольку вы установили search:true и postData.filters до вручную).   -  person Oleg    schedule 09.10.2015