Расширение mixItUp() js для фильтрации на основе значения раскрывающегося меню и диапазона дат

Question

Я пытаюсь жениться на двух настроенных сценариях фильтрации MixItUp. Один интегрирует bootstrap.datepicker для фильтрации на основе диапазона дат, а другой расширяет структуру для фильтрации на основе активного элемента в раскрывающихся списках.

У меня проблема с аргументом, переданным в функцию фильтра mixItUp(). Похоже, что он передается как [объект, объект], и это соответствует рабочей версии.

Bootstrap Datepicker: у меня это работает само по себе и прекрасно работает как единый фильтр: http://codepen.io/EricBintner/pen/wGWgpX

- & -

Фильтр из выпадающего списка: этот пример хорошо прокомментирован, но более сложен по структуре, чем я обычно имею дело: http://codepen.io/patrickkunka/pen/Fqocw

Этот выпадающий скрипт построен на функции init, которая использует для этого переменную.

init: function() {
        var self = this;
        ...
}

Я получил все работает и успешно направлен в функцию mixItUp(). Я поместил прослушиватели событий из средства выбора даты в раскрывающиеся списки прослушивателей событий. Что-то в аргументе диапазона дат не должно быть правильным, когда оно передается с переменной "self". Он передает аргумент функции mixItUp(), и я получаю console.log для печати, но MixItUp не фильтрует таким образом на основе этого диапазона дат - вместо этого он отфильтровывает все.

Вот расширение datepicker для выпадающего скрипта, который, похоже, имеет проблему. В частности, self.$ Show var - это то, что передается в функцию фильтра, и то, что кажется неправильным - возможно, я вставил "себя" в слишком много мест:

    filterDates: function() {
            var self = this;
            self.startDay = self.$startDate.val();
            self.endDay = self.$endDate.val();

if (self.endDay == 0) {
                return false
            } else {
                self.$targets = $('#mixContainer').find('.mix');
                self.$show = self.$targets.filter(function() {
                    self.date = self.$targets.attr('data-date').replace(/(\d\d\d\d)(\d\d)(\d\d)/g, '$1$2');
                    return (self.date >= self.startDay) && (self.date <= self.endDay);
                });
                console.log(self.$show)      // says [object, Object]
                self.parseFilters();
                return self.$show;          
            } 
         },

В любом случае, я думаю, что я очень близок, так что надеюсь, кому-то здесь будет легко.

Вот полный кодовый блок, который я создал: http://codepen.io/EricBintner/pen/VaawgX (не удается отфильтровать по диапазону дат)

Спасибо за помощь!!

Дополнительные ресурсы: https://mixitup.kunkalabs.com/support/topic/best-way-to-filter-based-on-provided-date-ranges/

Answer 1

Вот рабочий код: http://codepen.io/EricBintner/pen/NNbGMX

Несколько вещей были восстановлены, поэтому нет простого ответа. Спасибо тем, кто помог.

Этот новый метод заменил два метода в предыдущей версии:

parseCategoryFilters: function () {

    var self = this;
    self.groups.each(function ( idx, filter ) {

        // If this filter has a value, filter by it
        var filter_value = filter.value || '';
        if ( filter_value.length > 0 ) {
            self.$show = self.$show.filter(function ( idx, target ) {
                return $(target).hasClass(filter_value);
            });
        }

    });

    // Perform final filter
    self.$mixContainer.mixItUp('filter', self.$show, function ( state, instance ) {
        instance._activeFilter = '';
    });

}