Issues Collapsing Repeater Elements

Hello! On my website I have a repeater displaying a list of events from a collection. I do not want to show events that have occurred in the past. Here is what the repeater displays with no code:

I added some velo code to hide events with dates in the past


export function repeater4_itemReady($item, itemData, index) {
    const currentDate = new Date()
    const eventDate = new Date(itemData.eventDate)
	if (eventDate < currentDate) {
		$item("#container4").hide()
	} 
}

Now I get this, progress, but the item is still taking up space in the display:

Some searching around indicates that using the collapse() method instead of hide should help, so I try that:

export function repeater4_itemReady($item, itemData, index) {
    const currentDate = new Date()
    const eventDate = new Date(itemData.eventDate)
	if (eventDate < currentDate) {
		$item("#container4").collapse()
	} 
}

Which causes all of the items to disappear.

Does anyone know why this may be happening, and either how I can resolve this issue, or an alternate strategy to hide past events?

Thank you!

@ace-holt I’m guessing that you are using a dataset to populate the repeater. In any event, restricting the output to the repeater with some data function code would be the way to do it. With a dataset, you could use the setFilter command. Something like the following would work, but be aware that the currentDate variable that you have is the current date and time when the page is accessed. It’s possible that there are records in that collection where the eventDate field has the same date but has a time that would be less than the currentDate variable value, which means those records would be excluded. That’s probably not what you want. I’m altering the code so that the value of currentDate accounts for that scenario.

let now = new Date();
let year = now.getFullYear();
let month = now.getMonth();
let day = now.getDate();
// produce dateTime variable of midnight of the current day.
let currentDate = new Date(year, month, day, 0, 0, 0);

$w.onReady(()=>{
  $w("#dataset").onReady(()=>{
    $w("#dataset").setFilter( wixData.filter()
      .ge("eventDate", currentDate)
    );
  });
});

Thanks for your reply @tony-brunsman ! I tried implementing your suggestion.

First confirmed that the eventDate field is of date type in my collection:

Second, implemented your code, only changing the dataset name to match mine:

And tried to run, but still no luck - not seeing any repeater items displayed.

A couple possibilities come to mind.

The screen shot of the collection is not displaying the time for EventDate. That’s odd. Is there a time in there when you open the record?

Also, be sure that the field key is eventDate and not EventDate. Velo/JS is case sensitive. When referring to the field in code, you need to use the field key. The setFilter function is using “eventDate”.