Framer CMS Plus logo
Get CMS Plus

Filter+ Date

Filter collection items by date or date range. Use with Date fields; supports single dates, ranges, and dynamic dates via fetch.

filters date dynamic

Property Controls

  • Collection+ ID — Use the same ID as the Collection+ you want to filter. Set up your Collection+ first
  • Filter — Triggers the apply or clear filter function. Learn about this concept
  • Field Name — Must match the field name in your collection
  • Preserve — Enable/disable syncing with filter state. Read about preserving
  • Condition — Choose the filter option (see Conditions below)
  • Value — The criteria for the filter
  • Value Type — Select the type of value to use
  • Date Value — Set a date
  • Text Value — Enter the date as text in ISO 8601 format

Interactions

  • Active Filter — Variant when the filter is applied
  • Inactive Filter — Variant when the filter is cleared

Important

Both interactions are required when Preserve is enabled. Read about preserving.

Basic Setup

1. Match filter type to field type

Use Filter+ Date only with Date fields in your collection.

2. Integrate into your component

Integrate the Date filter into your component. Learn how.

3. Configure controls

Configure the Filter+ controls in the primary variant. If you use Preserve, add the required interactions: Active Filter and Inactive Filter.

Required interactions when preserving

4. Override in other variant

Override Filter in the other variant so the filter runs when switching variants. Learn about triggering functionality.

Filter control override

Conditions

  • Equals
  • Doesn’t Equals
  • Is Before
  • Is Before or Equal
  • Is After or Equal
  • Is Between Dates
    • Is Before
    • Is Before or Equal *
    • Is After
    • Is After or Equal *

* Conditions exclusive to CMS Plus.

Using a dynamic date

Framer’s native fetching only supports text fields. Learn how to enable fetching. You need an API that returns time in ISO 8601 format. This works for single dates and date ranges.

Example using TimeAPI:

  1. Set Value Type to Text to use Framer’s native fetching
  2. Click the + next to Text Value and select Add Fetch
  3. Enter your API URL
  4. Set Path to the property that returns a text value in ISO 8601 format (e.g. dateTime)

Fetch path for Filter+ Date

  1. (Optional) In Advanced, set Cache to 1 Day to reduce fetch requests

Cache setting for date fetch

If errors occur, check your API’s documentation. CMS Plus cannot assist with Framer fetching errors.