How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

To add date filtering to your existing Webflow filters using Finsweet CMS Filter, you need to configure both your CMS date field and your filter UI properly so that Finsweet can recognize and compare dates correctly.

1. Understand Finsweet's Filter Requirements for Dates

• Finsweet CMS Filter works by matching text or attribute values—so dates must be provided in a comparable format (such as YYYY-MM-DD).
• Your element displaying the date should have a custom attribute like fs-cmsfilter-field="date".
• Filter inputs (e.g., dropdowns or date inputs) also need the attribute fs-cmsfilter-element="filter" and a matching fs-cmsfilter-field="date".

2. Prepare Your CMS Date Field

• In your CMS Collection, make sure you have a Date field (e.g., “Event Date”).
• On each Collection Item in the Webflow Designer, bind that field to a Text Element or use a custom HTML Embed element.
• Inside that element, set the date in standard format (e.g., 2024-07-01) and add the attribute fs-cmsfilter-field="date".

3. Create UI Controls for Date Filtering

• To filter by date range, you typically use two input elements (start and end dates).
• Add two text inputs or date inputs to your filter section.
• Set their attributes as follows:
• Start Date Input:
  • fs-cmsfilter-element="filter"
  • fs-cmsfilter-field="date"
  • fs-cmsfilter-operator="gte" (greater than or equal to)
• End Date Input:
  • fs-cmsfilter-element="filter"
  • fs-cmsfilter-field="date"
  • fs-cmsfilter-operator="lte" (less than or equal to)

4. Format Dates Consistently

• Ensure all CMS date values are formatted consistently (e.g., ISO format: YYYY-MM-DD).
• You can format these using Webflow’s custom code embeds if needed.

5. Initialize Finsweet CMS Filter

• In your page’s Before tag custom code, include the Finsweet CMS Filter script and initialize it, referencing your CMS wrapper:

• Example:
  fsAttributes.init();

• Ensure your HTML structure follows Finsweet’s requirements:

• CMS wrapper: fs-cmsfilter-element="list"

• Individual items: fs-cmsfilter-element="item"

Summary

To add date filtering with Finsweet CMS Filter in Webflow:

• Attach fs-cmsfilter-field="date" to date data in your CMS item elements.
• Create inputs with fs-cmsfilter-operator="gte" and "lte" for start/end dates.
• Ensure date formats match across CMS and filters (e.g., YYYY-MM-DD).
• Initialize Finsweet CMS Filter properly on your site.

This setup enables dynamic filtering of CMS items based on selected date ranges.