I need to add a date range to a filter.

I would like fields being quick and userfriendly and I've thought in a combination of predefined ranges and manual input.

I mean something like the image below.

The drop down target is to save user time but the user must be able to specify dates from the date pickers.

Is it recommended to use natural time periods,such as weeks, months...? Or maybe it is preferable just a numbers of days, such as Last 7 days, Last 30days,....

Expanded dropdown List and selection of complete

draft mockup

Example with fixed amount of time:

enter image description here

balsamiq/feel free to edit

  • Don't have any sources or references to make into a proper answer, but to me "Last 7 days" and "Last week" are 2 different timespans. Last 7 days would be literally the last 7 days (i.e. Wednesday 24th November - Tuesday 30th November). However, last week would cover the previous calendar week (i.e. Monday 22nd November - Sunday 28th November). Both options are viable, but it depends on what the system is for and what the user would be using the date filters for - it's not just a case of changing the wording, the meaning behind the words also changes. Commented Dec 1, 2021 at 14:20
  • @crazyloonybin yes the 2 options for periods are not equivalent. But as periods will be just a shortcut groups days with no aim to get a exact list of results. If the user want a very specific range he can fill the date picker manually. I would like to know what option is supposed to be more natural for users.. Commented Dec 2, 2021 at 8:00

1 Answer 1


If the app uses keyboard, I'd consider a text field (a single line text editing element) where user can type using natural language. The field should only allow to type the predefined strings such as This week, Last month, Last quarter, Today, Yesterday, Since Tuesday, etc. and date ranges such as December - May (for the most recent December to May range), 2015-2020, 12/22/1990-May/5/2000, etc.

The user would need to press as few buttons and type as few characters as possible:

  • Automatic capitalization. E.g. upon typing l (for Last), the system should automatically correct it to L.
  • The characters that lead to unsupported formats should be prohibited/ignored. That is if user presses the a button after entering Dec, the button press must be ignored as the only possible option is December.
  • The hints on what's possible to type next are also very helpful. Upon typing j, the system should offer June and July.
  • Support natural language features such as references to holidays. Example: Since Labor Day.


1) The letter z will likely never appear in the supported formatted string and as such should be completely ignored. Starting the string should be possible with digit or one of the few letters such as t (for This, Today, Tomorrow, Tuesday, etc.). If user has already entered y, the system will only allow for e as a next character because y presumably means only Yesterday.

2) If user starts with typing l, then only possible option (I can currently think of) is Last.

3) The system should also offer hints on what's possible to type next and allow to select options with vertical arrows and completing the currently entered term with Enter button.

4) If user has typed j, the options offered should be June and July with June being the default (first in the list) option. If user hits Enter, then June is selected. If user types u and l next, the system should offer July as only valid option.

5) If user types a, this could mean April, August, and After (e.g. After Labor Day).

Other thoughts

  • For clarity, along with the user input, the system should display the actual interpreted date range. For example, if today is December 1, 2021 and user types Since last Friday, the interpreted date range should be Friday 11/26/2021 - Wednesday 12/1/2021. The preferred date format should ideally match user's native one.

  • If the app can support voice input, I'd recommend using it as well for the similar input style. Though correcting such input would require another algorithm. At least, allow user to speak meaningless words such as from, and, etc.

Example: the user may say something like from last quarter and until yesterday. Here, from, and, and until are useless (meaningless) words.

  • To support as many natural language constructions as possible you may want to first spend some time on collecting and organizing them. And then maybe creating sort of parser off the set of formal declarations.

  • There are some libraries that already support this kind of input. Though they may not support all variants you may need. Example: https://github.com/argenos/nldates-obsidian.

  • thanks Valera, it is a powerful and sophisticated approach. The app is web and users are more more focused in the use of mouse. BTW dropdown list and sliders are already used in other parts of the app. Commented Dec 2, 2021 at 8:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.