Hi there,
I’ve added Finsweet CMS Filtering to my site to filter by category but I also need to filter by date, how can I add this to my current list of filters?
Read only link here: Webflow - Hot Pot China
Thanks
2 Likes
@memetican Hey Michael, thanks a lot for this. I actually saw this but I’m unsure how to implement this into my build. Are you able to help? For example, how can I add the filter itself, at the moment I just have checkboxes but is it possible to add a date picker?
1 Like
I’ve got the same problem - anyone got a quick tutorial on how to get this to work? Cheers!
1 Like
Hey Charlie, missed your reply. It’s just a text field. I’m uncertain on the date format requirements, so check FS docs for that.
That’s a UI piece that is separate from the filter scripts.
Just google webflow date picker, or js date picker. Here’s one I found-
Did anyone get this to work and wants to share how?
1 Like
Not much to say Anke, just use the attributes in the FS Filter docs. It will translate the date automatically from text.
Hi! Same problem here.
We’re using Finsweet CMS Filters to search events. Everything works perfectly except from search by date range. In our Event CMS collection, the start and finish dates (which we want to filter) are set by proper date fields.
The filter only give us results when the input matches the events happening on specific dates: the dates in which the day of the month is set lower than 12. Any other input will be ignored. Events whose dates are set on Jan 1st-12th, Feb 1ts-12th, March 1st-12th, … , Dec 1st-12th are shown - events with dates set any day of the month later than 12th are left out.
It seems to be confusing “days” with “months” and therefore ignoring “every day higher than december” 
Does it make sense?
Any hope for getting this filter working properly? 
Javascript date parsing has always been problematic. Try changing the date format you are using in your date picker and in your data to a less ambiguous format like January 23 2024.
When I want to be very specific, I use ISO-8601 date format which most date picker libraries can generate, and which can be created inside a collection list embed with this hack;
1 Like
Thank you so much @memetican Michael, this is GOLD!! 
Now all events are being filtered, no matter which dates they have set 
However we didn’t succeed yet in the next step: set a date range. Start date and finish date filter fields are now working as independent filters, but not as a range. We applied the attributes given in the documentation for filter type = date and for option range
We didn’t achieve the expected search behaviour. When filtering e.g. from feb, 14th 2024 to feb, 20th 2024, the filter gives us all events happening in 2024, also the ones left out of the range.
Do Finsweet attributes actually work for search by date range?
Thanks for any kind of help!
Yes they do, I’ve done some fairly advanced date filtering including;
- Range to single event date
- Range to event date range
- Range to list of event dates
However range filtering is where I had the most difficulties with date parsing and is where I lean most strongly into the ISO-8601 date format. I never identified the exact problem, but your observation above ( switched month / day parsing? ) feels closely related. I’d try eliminating any chance of that with ISO-8601 if you can.
Hi @memetican thank you again for your tip. We have changed the date picker component so as to be able to set the date input into ISO-8601 format but we didn’t succeed yet. Flowbase date picker ( https://www.flowbase.co/blog/how-to-add-a-date-picker-to-your-webflow-form ) hasn’t worked for us so far, even if I specified the date format to be YYYY-MM-DDTHH:mm:ssZ in Flowbase script on the body tag. Somehow it always transforms the input into lowcase. Could someone recommend us another date picker which may work for ISO-8601?
When changing the input “by hand”, this means replacing “t” to “T” in the dates input (which won’t be a solution as it’s not user friendly, but at least it gives us the opportunity to play around), we get the start and finish date filters to work as independent filters. The problem comes again when applying Finsweet attributes for range. The filter continues showing all events happening in the whole date input year, let’s say all events happening in 2024, also the ones left out of the range. As if it would only be comparing YYYY and no MM-DDTHH:mm:ssZ longer.
I’ve used flatpickr successfully here. I don’t recall needing to modify its output.
It’s been a year since I last hacked my way through this jungle but I vaguely remember encountering an issue with the Z. It shouldn’t be a problem, but you might try +00:00 instead in both the filter range and in the target data, if they’re already GMT.
Also, check your site-level locale setting just in case Webflow is formatting things differently for some reason. I’d think it’s what’s in the HTML that matters, but it’s possible a lang= attribute could affect JS date parsing? Haven’t heard of such a thing though. I ended up doing a ton of console.logs in order to see exactly what it’s seeing and how FS filter is behaving.
Beyond that I’d need to dig and try different things. If you need some dev assistance, I will have a bit of time next week available. You can message me directly by clicking my name if you’re interested.
I feel like I need to nail this down and write a guide at some point on “advanced FS filter configs.”
Hi everyone,
I’m facing an issue integrating a date picker with Finsweet CMS Filter to filter CMS data by a selected date (without a range). Despite several attempts, the filter does not work as expected. I would really appreciate any insights or solutions.
What I’ve Implemented:
Date Picker Setup:
Incorporated a simple date picker within a form block, using an embed code for styling and functionality. The date picker includes previous and next day buttons for date navigation.
HTML Embed for Date Picker:
<div class="date-picker-container">
<button id="prevDay">←</button>
<input type="date" id="datePicker">
<button id="nextDay">→</button>
</div>
JavaScript for Date Handling:
<script>
document.addEventListener('DOMContentLoaded', function() {
const datePicker = document.getElementById('datePicker');
const prevDay = document.getElementById('prevDay');
const nextDay = document.getElementById('nextDay');
// Function to format the date as YYYY-MM-DD
function formatDate(date) {
let d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
// Function to get the local date considering the timezone offset
function getLocalDate() {
const now = new Date();
const timeZoneOffset = now.getTimezoneOffset() * 60000; // offset in milliseconds
const localISOTime = new Date(now - timeZoneOffset).toISOString().slice(0,10);
return localISOTime;
}
// Set the initial value of the date picker to the current local date
datePicker.value = getLocalDate();
prevDay.addEventListener('click', function() {
changeDate(-1);
});
nextDay.addEventListener('click', function() {
changeDate(1);
});
function changeDate(days) {
const currentDate = new Date(datePicker.value + 'T00:00:00');
currentDate.setDate(currentDate.getDate() + days);
datePicker.value = formatDate(currentDate);
}
});
</script>
CMS Data Display:
Set up a div block below the form to display CMS items, showing my CMS date called “Date Workout” in a text block.
Custom Attributes for Filtering:
- Collection list wrapper: fs-cmsfilter-element=“list”
- Form block: fs-cmsfilter-element=“filters”
- HTML embed (date picker): fs-cmsfilter-field=“dateFilter” and fs-cmsfilter-type=“date”
- Collection item (date display): fs-cmsfilter-field=“dateFilter”
The CMS data does not filter based on the selected date from the date picker, although filtering works correctly with non-date fields.
Thanks for your help
A few things to check-
Changing a filter value using JS will not automatically trigger FS filter to refresh. You’ll need to fire and event that bubbles in order to FS to register the change. Look in to Finsweet’s forums for more info.
Many date formats are ambiguous. If your picker is expressing the date in ISO8601 format, then it will by unambiguous. Try to express it in YYYY-MM-DD format, it will be more reliably parsed and matched. Similar issue for dates in your collection list dataset.
1 Like
Thank you @memetican !
I’ve managed to get the CMS filtering to work directly with the date picker and found the solution for using the the arrows to navigate to the previous or next date.
FYI the fire event solution was found here: CMS Filter not detecting input field values added by custom code - General - Support Forum
Here’s what I’ve done:
- I added a text field in my CMS database designed to store dates in the format YYYY-MM-DD
- I removed the custom attribute
fs-cmsfilter-type="date"to avoid conflicts between DD/MM and MM/DD formats - I introduced a custom attribute
fs-cmsfilter-field="dateFilter"within the JavaScript code itself rather than in the settings panel - Added the two events that fire the bubbles
The full code is as below
<div class="date-picker-container">
<button id="prevDay">←</button>
<input type="date" id="datePicker" fs-cmsfilter-field="dateFilter">
<button id="nextDay">→</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const datePicker = document.getElementById('datePicker');
const prevDay = document.getElementById('prevDay');
const nextDay = document.getElementById('nextDay');
function getTodayISO() {
const now = new Date();
return new Date(now.getTime() - (now.getTimezoneOffset() * 60000)).toISOString().slice(0, 10);
}
// Initially set the date picker value in ISO format
datePicker.value = getTodayISO();
// Function to change the date based on arrow button clicks
function changeDate(days) {
const currentISODate = datePicker.value; // Already in ISO format
const currentDate = new Date(currentISODate);
currentDate.setDate(currentDate.getDate() + days);
// Update the date picker with the new date in ISO format
datePicker.value = currentDate.toISOString().slice(0, 10);
// Manually dispatch events to trigger the Finsweet filter to refresh
datePicker.dispatchEvent(new Event('change', { bubbles: true }));
datePicker.dispatchEvent(new Event('input', { bubbles: true }));
}
prevDay.addEventListener('click', function() { changeDate(-1); });
nextDay.addEventListener('click', function() { changeDate(1); });
});
</script>
Thanks again