How can I filter dynamic lists in Webflow using a start date of "Today" to create automatically updating lists and pages based on date-sensitive content?
TL;DR
- Add a date field (e.g., "Start Date") to your CMS collection and bind a Collection List to show all items without native filters.
- Assign classes to items and date elements, then use JavaScript to compare each item's date to today's and hide past entries dynamically.
To filter dynamic lists in Webflow based on a start date of “Today,” you need to combine Webflow’s native CMS filters with custom JavaScript, as Webflow does not support “today’s date” filtering natively.
1. Set Up Your CMS with a Start Date Field
- Go to your CMS Collection and make sure it has a Date field (e.g., “Start Date”) for your time-sensitive items.
- Ensure this date field reflects the content’s publish, event, or valid start time.
2. Design Your Collection List on the Page
- On your page (static or CMS template), add a Collection List and bind it to this CMS Collection.
- Show all relevant items—do not apply a CMS filter yet based on the date.
3. Add a Unique Class to Filter Targets
- Give the Collection List Wrapper an identifiable class like
event-list. - Add a class (e.g.,
event-item) to each collection item or wrap the date element inside a span or div with a custom class likestart-date.
4. Write JavaScript to Filter by Today’s Date
- Embed custom code using the Page Settings > Before