Date range

The user wants to filter and look up information by a date.

Problem

The user wants to filter and look up information by a date.

Solution

Planning out the future or browsing past data involves dates and date ranges.

Use it whenever the user needs to pick a single or multiple days as a range in order to get to the desired data.

Consider alternative methods that might be easier for the user to select a range than always relying on a calendar picker.

Use presets like “Today”, “This week”, “This quarter”, “Last quarter”... whatever makes sense in your specific use-case to provide shortcuts. Use your logs to find common filters.

When using the calendar, make sure to highlight the selected days and make the start and end dates distinctive.

Use the date scroller if the user needs to jump large distances.

Validate the selection and only enable dates that are available to pick. For instance don’t let the user book a room starting from last week.

Use defaults that are relevant to the user in their specific situation. When booking your stay for a conference, a generic default date doesn’t help.

Showing 4 live examples
Calendar
Calendar
Scroller
Scroller
This example should be experienced in full screen
View in full screen
Presets
Presets
Custom scroller
Custom scroller

Problem

The user wants to filter and look up information by a date.

Solution

Planning out the future or browsing past data involves dates and date ranges.

Use it whenever the user needs to pick a single or multiple days as a range in order to get to the desired data.

Consider alternative methods that might be easier for the user to select a range than always relying on a calendar picker.

Use presets like “Today”, “This week”, “This quarter”, “Last quarter”... whatever makes sense in your specific use-case to provide shortcuts. Use your logs to find common filters.

When using the calendar, make sure to highlight the selected days and make the start and end dates distinctive.

Use the date scroller if the user needs to jump large distances.

Validate the selection and only enable dates that are available to pick. For instance don’t let the user book a room starting from last week.

Use defaults that are relevant to the user in their specific situation. When booking your stay for a conference, a generic default date doesn’t help.

Share in SMS
  • SMS
  • Email