Updating a repeater with results of filtering by date from cms

[user5621]

I am trying to filter a list of sermons based on a date selected in a date picker. I used the code from https://youtu.be/VbROpL-FsLs?si=9MpNclH1ib9fGKO-

My modified version for the CMS on my site is

import wixdata from 'wix-data';

$w.onReady(function () {

$w('#datePicker1').onChange(() => {

updateRepeater ();

})

});

function updateRepeater (){

let date = $w('#datePicker1').value()

console.log (date)

let filter = wixdata.eq ("Date recorded", date)

$w ('#sermonsDataset').setFilter(filter);

}

When I select a date it changes the date field in the first item in the repeater rather than filtering by the date.

[onemoretime]

Hi, @user5621 !!

Please check this reference and review your code again in comparison.

Filter | Velo

[noahlovell]

Put it into a quick test site, and got it working:

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#datePicker1').onChange(() => {
        updateRepeater();
    })
});

function updateRepeater() {
    let date = $w('#datePicker1').value;
	console.log(date)
    if (!date) return;

    // Format date as YYYY-MM-DD in local timezone
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
    const day = String(date.getDate()).padStart(2, '0');

    let formattedDate = `${year}-${month}-${day}`;
    console.log(formattedDate);

    let filter = wixData.filter().eq("publicationDate", formattedDate);
    $w('#sermonsDataset').setFilter(filter);
}

Explanation of the changes:

• When importing, it’s wixData rather than wixdata
• Getting the value from the date picker is done as .value (without the ())
• The date picker value will be something like Thu May 01 2025 00:00:00 GMT+0100 (British Summer Time), whereas the CMS date field (without time) is formatted as 2025-04-03, so need to format it correctly
• To create the filter, you need to do wixData.filter(), followed by the .eq... etc.
• Your field in the CMS is likely to be dateRecorded (Camel case) rather than Date recorded - you can find the Field ID when editing the field
  
  

Hope this helps!

[user5621]

@noahlovell

import wixData from 'wix-data';

$w.onReady(function () {
    $w('#datePicker1').onChange(() => {
        updateRepeater();
    })
});

function updateRepeater() {
    let date = $w('#datePicker1').value;
    if (!date) return;

    // Format the date to YYYY-MM-DD
    let formattedDate = date.toISOString().split('T')[0];
    console.log(formattedDate);

    let filter = wixData.filter().eq("publicationDate", formattedDate);
    $w('#sermonsDataset').setFilter(filter);
}

Thanks for this. I replaced my code with yours and it kind of works except that when I pick a date in the date picker it returns the day before as the value!

[user5621]

I’ve done a bit of Googling and it looks like the problem is with time zones. The date picker returns a date in my time zone at midnight which becomes the previous day when it’s converted to an ISO string. I’ll have to work out a fix.

[noahlovell]

Ahhh yes - .toISOString().split('T')[0]; removes the timezone

Just updated my example to keep the timezone present

[user5621]

Still not quite right
Sun Apr 06 2025 00:00:00 GMT+0100 (British Summer Time)
returns as
2025-04-05

I feel as if I should be able to work this out for myself but the information is confusing.

[user5621]

Err - it’s working now - maybe a caching problem?

There is still a remaining issue that if you choose a date that doesn’t match anything it correctly updates the repeater with nothing but you can’t select another date but you can still change the preacher.