CMS Filter a Date to be today -> future or today -> past

Attributes
1

Hi everyone,

We are building a filtering system with CMS Filter, Sort & Load.

Here ist what we want to achieve:
We have a Cars CMS Collection. Each car has a date field that defines when the car is available.

We want to add a filter button that allows to only show cars that are “available immediately” or “available soon”.

Maybe we are missing something easy.

What we tried:

  1. Using the conditional visibility based on the date field we tried to filter the cars. But because the conditional visibility just hides the div and does not remove it, this did not work.

  2. We tried using custom Code to change the text value of the element with the “fs-cmsfilter-field”. This generally works but only for the items on page one of the pagination.

We were able to change the text with the CMS Load API but no matter what we tried the filter did not work for these items.

  1. The last thing we tried was to use two date inputs (with range option) that are filled by custom code. When the “available” button is clicked we input a date in the past into the “from” field and the current day into the “to” field.

However the filter is not triggered. We have to manually go into the date field and change the date again in order for the filter to work.

Thanks for your help!

Nino

2

Hey @ninobachmann! If you are still using option 3 you can dispatch an event on both your fields after adding the dates by code and this should trigger the filtering.

Something like this should work

yourFromField.dispatchEvent(new Event('input', { bubbles: true }));

yourToField.dispatchEvent(new Event('input', { bubbles: true }));

Let me know if you need any help! :muscle: