Dropdown and Date Picker Filters

Ask the community
,
1

Hello,

I am trying to combine three dropdown filters and two date pickers (from & to) and activate the filters using a search button to filter a repeater. I have an another page with three dropdowns and text input that works great but having trouble figuring out the from/to date pickers and throwing them into the mix. Any help would be greatly appreciated it.

Here is the code I was trying to work with but perhaps it’s completely wrong. Ideally, I would also like if an input is left blank for it to just not apply. That’s how it works by default on my other page so assuming it would be the same here?

import wixData from ‘wix-data’ ;

let fromDateInput = $w ( “#datePicker1” );
let toDateInput = $w ( “#datePicker2” );
let dropdown1 = $w ( “#dropdown1” );
let dropdown2 = $w ( “#dropdown2” );
let dropdown3 = $w ( “#dropdown3” );
let searchButton = $w ( “#searchButton” );
let repeater = $w ( “#repeater2” );

$w . onReady ( function () {
searchButton . onClick (() => {
updateRepeater ();
});
});

function updateRepeater ( ) {
let fromDateString = fromDateInput . value ;
let toDateString = toDateInput . value ;
let dropdown1Value = dropdown1 . value ;
let dropdown2Value = dropdown2 . value ;
let dropdown3Value = dropdown3 . value ;

**let**  query  =  wixData . query ( 'Projects' ); 

**if**  ( fromDateString  &&  toDateString ) { 
    **let**  fromDate  =  **new**  Date ( fromDateString ); 
    **let**  toDate  =  **new**  Date ( toDateString ); 

    query  =  query . ge ( 'startDate' ,  fromDate ). le ( 'startDate' ,  toDate ); 
} 

**if**  ( dropdown1Value ) { 
    query  =  query . eq ( 'region' ,  dropdown1Value ); 
} 

**if**  ( dropdown2Value ) { 
    query  =  query . eq ( 'type' ,  dropdown2Value ); 
} 

**if**  ( dropdown3Value ) { 
    query  =  query . eq ( 'length' ,  dropdown3Value ); 
} 

query . find () 
    . then (( results ) => { 
        repeater . data  =  results . items ; 
    }) 
    . **catch** (( error ) => { 
        console . log ( error ); 
    });

}