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.

  • Calendar
  • Scroller
  • Presets
  • Custom scroller
Showing 4 live examples
Calendar
Book a flight
From 14 years
2-14 years
0-2 years
Calendar
Scroller
New event
Scroller
This example should be experienced in full screen
View in full screen
Presets

Filter Results by

Or by a custom range
Month
October
November
December
January
February
March
April
May
June
July
August
September
October
November
December
January
February
March
April
May
June
July
August
September
October
November
December
January
February
March
April
May
June
July
August
September
October
November
December
January
February
March
April
May
June
July
August
September
October
November
December
January
February
March
April
May
June
July
August
September
October
November
December
January
February
March
April
May
June
July
August
September
October
November
December
January
February
March
April
May
June
Day
15
16
17
18
19
20
21
22
23
24
25
26
27
28
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
01
02
03
04
05
06
07
08
09
10
11
Year
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
February
2025
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1
2
3
4
5
6
7
8
 
 
 
 
 
 
 
 
 
 
 
 
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1925
1926
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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