# CMS Filter Date Range

**URL:** https://forum.finsweet.com/t/cms-filter-date-range/3202
**Category:** Attributes
**Tags:** cmsfilter
**Created:** [August 1, 2024, 8:34am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202 "2024-08-01T08:34:49Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![antonyx.business](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/antonyx.business/32/2632_2.png) [@antonyx.business](https://forum.finsweet.com/u/antonyx.business)
#### Post date: [August 1, 2024, 8:34am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/1 "2024-08-01T08:34:49Z")

</div>

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](https://preview.webflow.com/preview/date-test-12345?utm_medium=preview_link&utm_source=designer&utm_content=date-test-12345&preview=6f0fa8314c46f226afbb2dcfde9bf24a&locale=en&workflow=preview) and here is the [Live Preview](https://date-test-12345.webflow.io/)

---

<div class="post-metadata">

### Author: ![antonyx.business](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/antonyx.business/32/2632_2.png) [@antonyx.business](https://forum.finsweet.com/u/antonyx.business)
#### Post date: [August 8, 2024, 8:43am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/2 "2024-08-08T08:43:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [August 10, 2024, 11:55am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/3 "2024-08-10T11:55:51Z")

</div>

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 😉

 ![Screenshot 2024-08-10 at 13.54.22](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/0/059b08d2855d4fb69d8e076e79923d22fbfc3a16.jpeg)

---

<div class="post-metadata">

### Author: ![antonyx.business](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/antonyx.business/32/2632_2.png) [@antonyx.business](https://forum.finsweet.com/u/antonyx.business)
#### Post date: [August 13, 2024, 8:02am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/4 "2024-08-13T08:02:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [August 20, 2024, 2:55pm UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/5 "2024-08-20T14:55:03Z")

</div>

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

Could you please try this snippet?

```js
    <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.

---

<div class="post-metadata">

### Author: ![antonyx.business](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/antonyx.business/32/2632_2.png) [@antonyx.business](https://forum.finsweet.com/u/antonyx.business)
#### Post date: [August 21, 2024, 8:49am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/6 "2024-08-21T08:49:56Z")

</div>

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:

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/9/9eaaf42d487f3dc43c75415568d47c6d5fb328c2.jpeg)

[Live Preview](https://date-test-12345.webflow.io/)

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [August 21, 2024, 8:59am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/7 "2024-08-21T08:59:18Z")

</div>

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.

 ![Screenshot 2024-08-21 at 09.58.14](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/f/fd47873304a959f5fbf77f26445eb46c4ae2e4bd.jpeg)

---

<div class="post-metadata">

### Author: ![antonyx.business](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/antonyx.business/32/2632_2.png) [@antonyx.business](https://forum.finsweet.com/u/antonyx.business)
#### Post date: [August 22, 2024, 9:37am UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/8 "2024-08-22T09:37:49Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [August 22, 2024, 1:01pm UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/9 "2024-08-22T13:01:28Z")

</div>

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

Let me retake a look 😉

---

<div class="post-metadata">

### Author: ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)
#### Post date: [August 22, 2024, 6:14pm UTC](https://forum.finsweet.com/t/cms-filter-date-range/3202/10 "2024-08-22T18:14:46Z")

</div>

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.

 ![Screenshot 2024-08-22 at 20.12.35](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/5/595bc2f19abd8f9aa84835d301e31bf1678972e9.jpeg)

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!