Filtering Collection Lists by Date Range

Webflow's Collection List filter feature is fully capable of filtering items by date, so that you can show e.g. "today's events", however many designers find it confusing.

In the examples below, we'll assume the collection items have both a Start Date and an End Date, however the same examples work perfectly for events that have only single date, you just use that same field in both rules.

If you have an Events collection in which some events are single day, and some events are a range, then design it as a range with two date fields, and make both of them required fields. In your single-day events, put the same date as both the start date and end date.

Filtering your list

Filtering your list to events that occur today

• Add start date and end date to your collection
• In the filter settings you want two rules;
  • Start date <= today
  • End date >= today

That tells you the event is happening now, as defined by server time, adjusted to the timezone you’ve set for your site.

The wording is a bit convoluted.
IIRC, you define it as Start Date / is before / 0 days / in the past.
Webflow will recognize what you’re trying to do and rewrite it.

Same approach for End Date / is after / 0 days / in the future.

Filtering your list to events occurring this week

This uses a similar approach as above, but;

• Start Date / is before / 7 days / in the future
• End Date / is after / 0 days / in the past

Does that melt your brain? Drawing it on paper helps you see why the filter query is specified this way.

We want all events that start before the end of this week AND have not ended yet.

Remember, CMS filters are a boolean AND operation, so all of the rules must be true in order for the item to be displayed.

Javascript-based filtering

In some situations, you may want to do more advanced filtering;

• Filter events to "this week" as defined by the nearest Monday to Sunday date range
• Filter events to a specific datetime range, rather than a date range, e.g. "bands on stage in the next 4 hours"

This requires custom code or a library like SA5's Advanced Element Filtering.

https://attr.sygnal.com/webflow-html/advanced-element-filtering

SA5 supports custom function for the filter evaluation, so you can add a small function to determine whether you want an element to display or not.

Date Range Filtering Example

Here's a simple example that will only show items between two dates.

<script>
function helperBetweenLocalDates(dt1,dt2)
{
  const d = new Date().setHours(0,0,0,0); 
  const d1 = new Date(dt1).setHours(0,0,0,0);
  const d2 = new Date(dt2).setHours(0,0,0,0);
  
  if (d >= d1 && d <= d2) 
    return true;  

  return false;
}
</script>

As your filter attribute on the filtered items, you can supply the dates;

wfu-filter= helperBetweenLocalDates('2022-11-16', '2022-12-01')

Set your dates to whatever you want.

Note;

• Make certain to use YYYY-MM-DD format to avoid date-parsing ambiguities.
• When it comes to date checks, client-side scripting can only seen the user’s own system clock. Today, in most parts of the world, that’s decently accurate. Modern computers frequently sync their clocks now.
• I’ve written the filter function to view your dates from Bob’s perspective, aka the user. If you set that element to appear between Dec-01 and Dec-02, it will appear between those dates from Bob’s perspective, That window shifts if he’s in a different timezone. As I write this, it’s Tues for my American friends, while I’m having Wed breakfast.

https://discourse.webflow.com/t/how-to-show-element-only-on-a-specific-date/222949/3?u=memetican

Notes

Datetime support

To my knowledge, Webflow's CMS filtering won't work well in a datetime situation, where you want your filter rule to include the time as part of its decision.

In this situation, I typically use the Javascript approach above.

‍