CMS Filter Date Range

[antonyx.business]

Hello, first time poster.

I have looked at several related posts, but have been unable to find a solution.

I am trying to filter some event dates - and they should fall within the start and end range.

The two main issues I’m encountering:

1. My filter only fires when typing into the input, it doesn’t fire when a date is chosen using the date picker.
2. Whenever I enter a value in the second input (range “to”), it shows 0 results.

Here is my Read Only Link and here is the Live Preview

[antonyx.business]

Giving this post a bump. Any help would be greatly appreciated.

[Support-Luis]

Hey @antonyx.business! Sorry for missing your first post! I have spotted the issue and I am working on resolving it. I’ll try to keep it native to the date picker library you have used so I’ll get back to you.

By the way, this setup should be enough once I add the needed code, currently you have the inputs repeated which might end up causing extra bugs as they all share the same field identifier

[antonyx.business]

Thank you @Support-Luis for getting back to me.

Yes I will definitely remove the non-calendar inputs before launch. I’ll do that now in fact.

Also it’s important that the dates are in the following UK format:
DD/MM/YYYY

I look forward to seeing your solution. Thanks again.

[Support-Luis]

Hey @antonyx.business! I apologize for the delay. I got sidetracked with other requests.

Could you please try this snippet?

    <script>
      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          console.log('cmsfilter Successfully loaded!');

          $('[data-toggle="datepicker"]').datepicker({
            format: 'DD/MM/YYYY',
          });
          // Available date placeholders:
          // Year: yyyy
          // Month: mm
          // Day: dd
          if (window.innerWidth < 768) {
            $('[data-toggle="datepicker"]').attr('readonly', 'readonly');
          }

          $('#Date, #Date-2').on('change', function () {
            this.dispatchEvent(new Event('input', { bubbles: true }));
          });
        },
      ]);
    </script>

You can leave it in the CMS Filter callback or your original document.ready() function.

[antonyx.business]

Thanks @Support-Luis

I have added that code. Something happens now when you click a date on the calendar, but the range doesn’t appear to be working correctly. I think it may be choosing 1 event per date, rather than all the events between the ranges:

Live Preview

[Support-Luis]

Hey @antonyx.business! I think you just happened to choose the combination of dates where only 2 events happen on said dates. Here is another search that shows the events within that date range.

[antonyx.business]

Hi Luis, some of those events are in September and October, whilst the filter is set for August… so it may only be filtering the ‘day’ part of the date - 20th to 28th, instead of 20th Aug to 28th Aug.

[Support-Luis]

Oh my bad! I only scanned quickly the results and saw the 09 as 08.

Let me retake a look

[Support-Luis]

Hey @antonyx.business! I’ve been testing some things and have been noticing some stuff.

We are missing the fs-cmsfilter-type = date attribute, however, adding this to all the field elements throws an error because the items are not recognized as dates. I see the filter fields for the elements have been added via an embed and I see some stuff is commented out.

This should not affect the filter but could we try adding the date to a text element?

Other than this I do not see why the filter is not working as expected, we can also try using a native date picker to rule out any issues with the one you’ve added.

Let me know what you think!