Problem with date-picker

[ilune]

I just implement jplist and wanted to add a filter with date-picker, all seems to work good: When i selected one date, the input field update its value, but the date popin select doesn't close, and the data are not reload with new selection... I have to click to another field like the text controller for the date filter will be taken into account.

Is there a way to force redraw ?

I'm not sur if there is not a conflict with another datetime picker libraries, when I remove them, I have one error when daterange picker still here (library from here http://www.daterangepicker.com/ ):

TypeError: c.params.$prev.datepicker is not a function ...mat").toString()};c.params.defaultPrev=c.params.$prev.datepicker("getDate")

My code:

jQuery.fn.jplist.settings = {
        /**
         * jQuery UI date picker
         */
        datepicker: function (input, options) {
            console.log('datepicker function set options', input, options);
            //set datepicker options
            //any datepicker option can be set
            options.dateFormat = 'yy/mm/dd';
            options.changeMonth = true;
            options.changeYear = true;
            options.onSelect = function() {
                console.log('select', this);
            };
            //start datepicker
            input.datepicker(options);
        }
    };
    //check all jPList javascript options here
    jQuery('.jpfilter').jplist({
        itemsBox: '.list-group-full',
        itemPath: '.list-group-item',
        panelPath: '.jplist-panel',
        effect: 'fade',
        debug: true,
        redrawCallback: function (collection, $dataview, statuses) {

            //this code occurs on every jplist action
            console.log('redrawCallback', collection);
        }
    });

<div
            data-control-type="date-picker-range-filter" 
            data-control-name="date-picker-range-filter" 
            data-control-action="filter"
            data-path=".document-date-mdy" 
            data-datepicker-func="datepicker"
            data-datetime-format="{month}/{day}/{year}"
            class="jplist-date-picker-range">
            <input
                type="text"
                class="date-picker"
                placeholder="Datepicker"
                id="jplistprev"
                data-type="prev" />
            <input
                type="text"
                class="date-picker"                             
                placeholder="Datepicker" 
                id="jplistnext"
                data-type="next" />
        </div>

Also it will be great if we can filter with datetime picker library, i've tried something like this (deactivated for the error upper):

    jQuery('#jpdates').on(' apply.daterangepicker', function (ev, picker) {
        //do something, like clearing an input
        jQuery('#jplistprev').val(picker.startDate.format('MM/DD/YYYY'));
        jQuery('#jplistnext').val(picker.endDate.format('MM/DD/YYYY'));
    });

But still have the problem to reload data grid...

[ilune]

I found the problem, when i call datepicker, i set

options.onSelect = function() { console.log('select', this); }; That overrides event function that can redraw results...

Then I addedd manually ui-datepicker and it's seems to work.

[ilune]

Also found the way to force redraw

var api = $('.jpfilter').data('jplist') api.observer.trigger(api.observer.events.unknownStatusesChanged, [false]);