Skip to content

Date range filter

Date range filter allows users to select specific date intervals, either by choosing two absolute dates or by defining a relative range based on a reference point.

Usage

The date range filter provides options for both absolute and relative dates.

Users can select specific dates using either the calendar mode or the input mode.

It is possible to switch to an advanced mode to access relative date functions, which use offsets to specify dates in relation to a reference point (e.g., 7 days before or 1 month after now).

Additionally, it includes optional presets for quick access to common periods like "Last 7 days" or "Next month.

date range filter

When to use

  • For complex date filtering scenarios or in dashboards.
  • When the use case requires flexibility in selecting periods relative to a reference date/time (e.g., "5 days before").
  • When the use case involves advanced filtering capabilities, such as combining today or now with relative ranges.
  • To offer users quick access to common preset ranges.
  • Use a date picker if simpler date selections are required.

Best practices

  • Use it in combination with input button.
  • Use “Enter date” or the date format (i.e., MM/DD/YYYY) as placeholder.
  • Configure presets according to the use case.
  • If there are more than 10 presets, consider adding a search function.

Except where otherwise noted, content on this site is licensed under MIT License.