Datepicker + CMS Filter (date format in French

Hi!

I’m trying to add 2 date picker and use them to range filter a CMS list.

I’ve add all the attribute, when I test with only number, the range filter works, but when I add this attribute (fs-cmsfilter-type=“date”) it’s not working anymore.

Here is the readonly link → Webflow - NEC

This is the date I’m trying to filter

This is the “from” input

And this is the “to” input

Am I missing something?

Thanks for your help! :slight_smile:

1 Like

Hey @terence! If you do not add the date type, are the items filtered correctly within the range?

If you could share a live link to test I’d appreciate that

Hey @Support-Luis! If I remove the date type and search on an other input, like the text “50”, yes the range works

Yes here is a live link → Évènements 2 :slight_smile:

Hey @terence I am afraid this approach is not going to work out out of the box. What we can try to do is add a hidden Range Slider which can work with date ranges and mirror the values to the slider’s input with Mirror Input Values.

If this does not work we can try some custom code to reformat the date from 12/06/2023 to 12062023 in both the filter and the cards and use this as the filter field.

Ah this has been driving me mad for the past few days. I’ve been wrestling with exactly the same situation, which according to the FS docs should work fine.

What’s weirder is that it works great on 50% of the devices I’ve tested, while the other 50% return no matches. The difference doesn’t appear to be related to timezone, locale, date format, OS, browser… and, no errors are thrown when it fails.

Here’s a demo of two devices side-by-side.
Also the prototype link.

Hi Luis, mirrorinput + range slider is resulting in exactly the same problem.

Hey @memetican, I am getting this error on my end, seems to be the endDate set to infinity on your code. Can you try this instead?

endDate = new Date(today);
endDate.setFullYear(endDate.getFullYear() + 10); // Add 10 years to the current year (adjust as needed)

This might not be the solution for the mobile issue, which is the first I’ve seen CMS Filter behave differently on other devices, but it clears an error from the build

Thanks Luis, that was just an open-ended timerange hack.
Here’s a version of the page, that has zero script on it, except finsweet’s filtering.

https://cms-filter-test-da71c9.webflow.io/basic

Here’s a capture of exactly the same problem occurring on an android device ( also seen on some chrome desktops as well as an iPhone / Safari ).

On these devices no errors are reported but filtering fails on a closed date range.