Filter table by date

Hi Everyone,

I’m looking to create a table with data from a dataset. I’ve created a filter from a dropdown box however i’m looking for something else.

On page load, i want to filter out all the entries where the date in the ‘eventDate’ field has passed. Therefore just leaving any entries for today or a date in the future. Any ideas?

Thanks in advance.

You should add some code for it.
Use the dataset’s setFilter() to filter the records you don’t want displayed.

Hi Ohad,

I followed that link, worked like a dream. Thanks for the help.

Hi Tim,

I need to do the same. Just need to filter a dataset to only display upcoming events. So could you tell me how you did it?

Can i use javascript to filter an existing dataset that is already connected to a galery via the WYSIWYG editor?

Or do i need to connect everything using javascript?

greetings

@der-barde you can use code to filter a dataset. It doesn’t matter how you connected it to the gallery.

@ohad-laufer works great. thanks.
can i apply gt(today()) or do i need to manipulate todays date before doing that?

Tim, can you show what code or commands did you use to filter past events from today’s date? I need to do something like that to show only data records available between two dates in the dataset, but the dataset filter does not let me.

@jfercalderonwix

The dates need to go through some Javascript manipulation to be ready to return results that you would expect. You need to apply a condition that is going to return all possible datetimes for a given datetime field from midnight on the start date to midnight on the ending date. Let’s say you have two date picker elements, this code will filter the dataset. Of course, you will need to substitute your dataset and date field names in the setFilter statement.

export function FilterDatasetByDate(){
 let yearValue = $w('#datePicker1').value.getFullYear();
 let monthValue = $w('#datePicker1').value.getMonth();
 let dayValue = $w('#datePicker1').value.getDate();
 let date1 = new Date(yearValue,monthValue,dayValue,0,0,0);
 
 yearValue = $w('#datePicker2').value.getFullYear();
 monthValue = $w('#datePicker2').value.getMonth();
 dayValue = $w('#datePicker2').value.getDate();
 let date2 = new Date(yearValue,monthValue,dayValue,23,59,59);
 
  $w('#dataset1').setFilter(wixData.filter()
      .between("dateField", date1, date2)
    )
    .then(() => {
      console.log("Filter is set.");
    })
    .catch((err) => {
      console.log(err);
    });
}

here’s what i did to filter the xmas calendar to show only today’s offer:

downside is, it’s not really “safe”

import wixData from ‘wix-data’;
//import {getServerDate} from ‘backend/serverdate’; // did not work out
// await let today = getServerDate(); // did not work out
const today = new Date();

$w.onReady( function () {
$w(“#dataset1”).setFilter(wixData.filter()
.lt(“datum”, today)
.gt(“bis”, today) //bis==until
)
.then(() => {
console.log(“Dataset is now filtered”);
})
. catch ((err) => {
console.log(err);
});
});

did you manage to do it?