Hi,
I am struggling with setting up CMS filter for this scenario:
We have tour agency website where user can select departure and arrival date. Based on that the tours list will be filtered. Tour card itself has also departure and arrival date.
So if you select a departure date it will act as a starting range, then you select an arrival date which will act as closing range.
E.g. (in dd.mm.yyyy format)
Departure 20.08.2023
Arrival 30.08.2023
Result: Should show all the tours that have departure date 20.08.2023 or later and arrival date 30.08.2023 or sooner.
Is this possible with CMS filter? If yes, how?
Thanks!
Hey @tonyskovi! You can use the date and range options from CMS Filter. If you share your links I can show you where to place these attributes 
Hey @tonyskovi! The IDENTIFIER needs to match in both to and from fields. Could you change the date2 to date?
Also, as it is set up right now the filter will not return any values until the text matches the format allowed by CMS Filter. If you have a date picker this might work smoother.
@Support-Luis Just followed your instructions, added a html date input with desired attributes + set a desired output date format in my tour card (dd.mm.yyyy).
Now if I try to pick a date, nothing will happen and an error will appear in console. If I remove attribute field type “date” from both elements, the filter will “work” but it is returning no results.
@tonyskovi, one reason could be that your date fields in the card are formatted as dd/mm/yyyy and the inputs are formatted as mm/dd/yyyy.
I modified the date format on the cards and this is how it is behaving → Loom | Free Screen & Video Recording Software | Loom
@Support-Luis yes, I understand the issue, seems like the filter is accepting only formats that start with a month first (mm/dd/yyyy e.g.), if I try format starting with a day, I get and error described above.
It is no problem for me to set date format for departure and arrival date to mm/dd/yyyy but I cannot change the format of “date” input, which is set differently for each browser, user, based on their location (Also why you saw format mm/dd/yyyy on your end but I see dd/mm/yyyy on my end) - that is something you cant event change with JS and it seems like the filter works only with “date” input. If I change it to “text” input and enter the date in desired date format (mm/dd/yyyy) the filter is not filtering correctly.
Any idea how to make this work with a custom input? As it seems that we cannot control the format of “date” input.
https://test-playground-bf0854.webflow.io/
try the custom input and see what I meant
hey @tonyskovi! What if we try using a date picker that allows to enforce a date format? Either jQuery or third-party, let me know which one you choose and we can get straight to setting it up
@Support-Luis All the datepickers return the date in custom format in a “text” input. But lets try something, I have tried this one: Working Date Picker Input - Webflow which is based on jquery datepicker.
See it live here: https://test-playground-bf0854.webflow.io/
Persisting issue: Filter seems to be filtering, but not correctly, as the input type is “text”.
New issue: Filter is triggered only when you paste or enter the value manually. If you select the date from datepicker, nothing will happen.
hey @tonyskovi I think I managed to solve the issue. What I did was, I added two hidden text inputs with the attributes for CMS Filter, leaving the date picker UI only to handle the date selection. The value from #Date-2 and ‘#Date-3’ are then copied to these inputs with id #filter-from and #filter-to respectively and an input event is simulated.
Here is the code I used
<script>
$(document).ready(function () {
$('[data-input="datepicker"]').datepicker({
format: 'm/d/yyyy',
});
function updateAndDispatchInputEvent(datepickerId, filterId) {
$(datepickerId).on('pick.datepicker', function (e) {
const timestamp = e.date.valueOf(); // Use e.date to get the timestamp
const date = new Date(timestamp);
const formattedDate = date.toLocaleDateString('en-US');
// Update the value of the filter input
$(filterId).val(formattedDate);
// Manually create and dispatch an input event
const inputEvent = new Event('input', { bubbles: true });
$(filterId)[0].dispatchEvent(inputEvent);
});
}
updateAndDispatchInputEvent('#Date-2', '#filter-from');
updateAndDispatchInputEvent('#Date-3', '#filter-to');
});
</script>
Hey @Support-Luis , thanks for that snippet!
Unfortunately, the filter is not filtering correctly. Check for yourself:
https://test-playground-bf0854.webflow.io/
E.g. try to set departure date for 8/30/2023, it should shows 3 cards, but instead there is no result.
I get shown all 4 cards instead of none 
and setting the departure date for 10/1/2023 returns only the 2 items with a departure date later than October 1st.
Here is another video on how it looks from my end… Loom | Free Screen & Video Recording Software | Loom. Which I believe is the expected behavior, but please correct me if I’m wrong
@Support-Luis just found out that, if you change language of your browser to English (US), the filter will work as it was shown in your video but if I change it to my language (Czech) the filter is not working properly. You can try and change it to some language where it has different date format then yours (mm/dd/yyyy).
I also tried to modify your provided code, changed “en-US” to “cs-CZ” and all the date inputs to d.m.yyyy format, but I get an error in console (described before).
It has something to do with date format and also browser language of current user… I am so clueless 
Interestingly, I found a similar topic here: Datepicker + CMS Filter (date format in French
where user has posted a nearly-working solution: Basic
If you go there, and try to set first to e.g. July 1, 2023 and click on Submit, the filter should not work for you. But for me, it is working. BUT if I change my language of browser to yours (English US), it will stop working. But just in Chrome. In Firefox, in my language, it is not working. Now I am even more confused.
@tonyskovi you are completely right, this is why we did not have the same behavior with the code. This might require a deeper dive to find a solution. I’ll DM you!
