Extending mixItUp() js to filter based on dropdown menu value and date range

Question

I am attempting to marry two customized MixItUp filtering scripts. One integrates bootstrap.datepicker to filter based on a date range and the other extends the framework to filter based on the active item in dropdown boxes.

I am having an issue with the argument passed to the mixItUp() filter function. It appears to be passed as [object, Object] and that is consistent with the working version.

Bootstrap Datepicker: I got this working on it's own and works great as a single filter: http://codepen.io/EricBintner/pen/wGWgpX

-- & --

Filter from dropdown box: This example is well commented but more complex in structure than I usually deal with: http://codepen.io/patrickkunka/pen/Fqocw

This dropdown script is built on a init function which uses a var for this.

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

I have gotten everything working and successfully funneled to the mixItUp() function. I put the event listeners from the datepicker with the dropdown event listeners. Something in the date range argument must not be right when it gets passed with the “self” variable. It passes the argument to the mixItUp() function and I get the console.log to print, but MixItUp does not filter based on this date range this way -- instead it filters out everything.

Here is the datepicker extention to dropdown script which seems to have the problem. Specifically the self.$show var is what gets passed to the filter function and what seems malformed -- perhaps I pasted "self" in too many places:

    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;          
            } 
         },

Anyway I think I’m very close so hopefully this will be easy for someone here.

Here is the complete codepen I've created: http://codepen.io/EricBintner/pen/VaawgX (this fails to filter based on date range)

Thank you for your help!!

Additional Resources: https://mixitup.kunkalabs.com/support/topic/best-way-to-filter-based-on-provided-date-ranges/

Eric_B Eric_B · Accepted Answer · 2016-03-14T21:43:52

Here is the working code: http://codepen.io/EricBintner/pen/NNbGMX

A few things have been rebuilt so no simple answer. Thanks to those who helped.

This new method replaced two methods in the previous version:

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 = '';
    });

}

Extending mixItUp() js to filter based on dropdown menu value and date range

1 Answers