Description
Context
Currently, filtering by Date is not very flexible. There are cases which are hardly achievable using our current filters, especially relative ranges like "4 days ago", "one week from now" or "(within) this month". See other mentioned problems in Highlights section.
Solution
To make filtering by Date fields more flexible, we're redesigning it's functionality and mechanics, how dates are actually filtered.
General behavior
When filter by Date Field is added, it is present in following format: Where [Date] [is] [Select date…]
Default operator is is and no default date is selected
Date filter can be reordered, pinned, grouped, and all other actions are still available
When a relative time ("Today", "2 days from now" etc) is selected, we show exact value in a tooltip on hovering the "Select date…" dropdown
If operators or date range are too long to fit in default dropdown menu (start to truncate), we slightly increase Filter pop-up width (as we do when we add Filter groups)
Operators
We will merge some operators from 2 dropdowns to one, to make it easier and more natural to select any date or period. These operators are:
is - a single date operator
🦄 ❓ is not - everything except selected date → should be separate feature
is within - a range of dates
is earlier than - a single date (ex "is before")
is later than - a single date (ex "is after")
is on or earlier than - a single date
is on or later than - a single date
is empty - no value
is not empty - has any value
Time selection (value)
A second dropdown after operator offers user to select any date (and sometimes time) and offers few popular presets first:
🦄 Now → separate feature
… - now we can add as many other presets as we want, like "Next year", "This quarter" etc
Custom date…
Custom date picker allows user to select either Relative or Exact time during filtering
Date picker has 2 tabs — Relative and Exact (Relative is now default, since we want to promote it some time after release)
Relative time picker allows user to set any time period and in any (day, week, month, year) increment based on today
Exact time picker has same functionality as our current date picker → selecting exact date and time
We are showing resulting date as a hint at the bottom in both Relative and Exact tabs
Pressing Apply closes the date picker and sets time as selected
🦄 convert dates to larger increment when there's a match — 7 days ago → 1 weeks ago ; 365 days from now → 1 year from now
🦄 we can update our DatePicker UI on front-end, if it's not a ton of work. I've redesigned it in Figma because we didn't have a ready-made component
Single dates vs Ranges
If user chooses the is within operator, then the Select date… dropdown changes with 2 other: From… and To…
Opening both "From…" and "To…" dropdowns offers same options as "Select date…". This means that range can be Exact, Relative, or Mixed in both ways:
From Jan 2 2024 → To Jan 30 2024
From 4 days ago → To 2 months from now
From June 12 2024 → To Yesterday
etc
❓ How to recreate This week, This month using is within operator for the date range?
Figma
https://www.figma.com/design/JRmd7B9p7MPXFojD2fZuD1/PA---Views-%26-Search?node-id=13846-61743&t=Mqi6CKjAR30DbRrx-1
Kickstart Notes
We don't do anything new with Date Range Fields, they are still separated by Start & End
Migrate values from one date (is) → date range (is within from → to)
We won't include validation to prevent selecting End dates later than Start dates (for both Relative and Exact). We will show hint with warning
Maybe later we will expand Custom Date… right after Date filter is added
This Filter change will affect all Filter menus (all views, relation views, etc)
Check where Datepicker control is used to prevent Tabs from appearing in places where not necessary :nastya:
Archive solution
Solution I
[Date Field 🔻] [is earlier than 🔻] __3__ [days 🔻] [ago 🔻] April 3, 2023
[Date Field 🔻] [is later than 🔻] __2__ [weeks 🔻] [from now 🔻] April 20, 2023
❓ You can edit the exact date and the changes will be reflected back to the relative offset. If the current granularity is not enough (ex. April 20, 2023 → April 19, 2023 makes it 1.9 weeks from now), we switch to lower granularity (ex. 13 days from now).
☝️ ago and from now are special cases of context values: Generalize context filters into dynamic values
☝️ is earlier than and is later than sound better in the sentence compared to is before and is after but we can sacrifice readability for horizontal space if needed.
References
We already have a relative filter that allows any value in Vizyrop historical Reports 🤯:
Notion: