CMS Filter with a date picker
Heyo - anyone has used Finsweet CMS filter with a date picker?
I created a custom element and set the tag as input and type as "date", and then I added the custom attributes according to the finsweet documentation (fs-cmsfilter-field=date). I've also set the format to MM-DD-YYYY, However after I publish and test it, it is returning no results.
Can someone kindly have a look at my readable link and tell me what I'm doing wrong here? P sure I'm doing something dumb but just can't figure it out.
Here's the staging link
Really appreciate anyone checking this! Thank you!
4 Replies
Hey @Uddeepon CMS Filter works by matching strings between your filters and your CMS data.
In your example, the date filter formats are not matched.
In filter the format is MM/DD/YYY as you mentioned.
However, if you inspect the input
value property you'll see it is '2024-04-30'
Your date in the CMS data is stored July 30, 2023
Since those two strings don't match, the filter doesn't show them.
If webflow offers a date format of YYYY-MM-DD then simply change to that in Webflow and you should be good. If that isn't available in the dropdown you can use an embed with injected fields to get it! You can still show July 30 2023 in the card, but move the date attribute to this newly formatted date and hide it show it doesn't show.
Hope that helps!Hey @Web Bae!
Thanks so much for clarifying this for me! Changing the date format to YYYY-MM-DD worked to filter out dates, and it works.
Now the issue is that I can only filter out the exact date that was selected which makes sense, but Ideally I'd like to choose a range or at least a date from which the rental property would be available.
So I added the the attributes mentioned in the documentation to my input date picker field, but in doing so the results are not getting filtered based on the selected range.
Example - if I choose 29th April 2024 to 5 May 2024, results show up as all the dates in 2024. Even outside the range. Tested it again with another year and it shows all the items available in that year.
Any idea why this might be happening? Or how I could resolve this?
@Uddeepon I'm not 100% sure I haven't used attributes for that but the docs say you can.
https://finsweet.com/attributes/faq/use-attributes-to-filter-by-date-range#:~:text=Yes%20you%20can%2C%20add%20fs,%2Dfield%20%3D%20%22IDENTIFIER%22.
did you know about
fs-cmsfilter-type = date
you can probably use it to tackle the first problem you posted about and this filtering problem!Can I use attributes to filter by date range? - Attributes by Finsweet
Check the answer about this question on our Frequently asked questions.
@Web Bae
Yes, this is what I tried! Unfortunately, couldn't get it to work based on a date range. Currently only filters the exact same date I search for when it's YYYY-MM-DD.
Either way, thanks so much for helping me figure out the first issue. ❤️ I'll let you know if I manage to solve this later on. 🫣