Calendar banner

The Ultimate Guide to Design a Perfect Date Picker

A user interacts with different UI controls while working on a product. Providing the right control at the right place is a challenge for UX designers. An input of the Date format is a common type of input while interacting on a web form. Adding a good user experience for a Date picker control is as important as for any other input control on UI.

In this article, we are going to learn best practices for designing a date picker UX. These practices will help you get answers to a few common questions related to the appearance, placement, and behavior of a date picker control. A few examples are the default state, empty state, input validation and error handling, display of months and years, showing weeks, and multiple months, and many others.

What is a Date Picker Control?

A Date picker control is a text control where the user can insert a Date in the required format. It is helpful for users to provide them guidance about the required format.

To avoid an invalid format, usually a Date Picker control is provided along with a Date input control where the user can select the required Date easily by navigating between days, months, and years.

When To Use A Date Picker on UI?

A Date Picker control is used where a date is required as input from the user. For example, Date of Birth, Joining Date, Range of Date for searching required items, etc.

Date Picker Control: Best UI Practices

The following sections present best UI practices for designing Date input and Date picker control by answering questions from actual users.

I. Date Input Control

1. Split Date control into Days, Months, and Years or provide one control?

A Date Input control can be displayed in multiple ways on the UI.

Date input control can be a text box that takes Date as input. Such type of control displays a Calendar icon that the user clicks to see the Date Picker control, a calendar. Users can enter the Date inside the text box in the required format or click on the Calendar icon to open the calendar and select a date from it.

Age Calc provides a Date input control within a text phrase
Calendar Date Picker provides an option to display Calendar by clicking the icon inside the text box

Date input control can be displayed as a group of multiple drop-down boxes where the user provides three inputs: day, month, and year. Clicking the Day drop-down opens a list of numbers from 1 to 28/30/31 depending on the selected month. Clicking the Month drop-down opens a list of 12 months. Clicking the Year menu displays a list of past, current, and future years.

date input 2
New Project Model provides separate controls to select Month, Day and Year

Providing an integrated input control with an option of opening a calendar control gives users more freedom to navigate between dates and select the required one. However, more error handling is required so that the user cannot select an invalid date within the calendar.

Whereas displaying separate controls for selecting day, month and year takes the user to the required flow and there is less chance of selecting an invalid date. However, extra clicks and more scrolling are required to find a desired date within multiple drop-downs.

2. What should be the empty state of Date input control?

The default state of the Date input control depends on the current circumstances.

If the user is expected to select a particular date, for example, today’s date, then the Date input control will display today’s date.

If there is no such date, then the Date input control will display empty. The empty state of the control should display a help text that guides the user about the required input format.

Register a Default displays the required date format as help text inside the Payment Due Date control

Providing a help text that gives the user an idea of the required date format is a way of preventing input errors. There is less chance that the user will put a date in an incorrect format if proper help is available on UI. Error handling is still required in this case.

3. How to do input validation and error handling in Date control?

In the first place, provide a help text inside the Date input control that guides the user about the required format of date input.

Next is to define input validation. Indicate the user if he enters an invalid format, and guide how to make it correct.

Change the color of the input box to Red that indicates an error in the input. Providing an error icon is a plus. Error description and resolution details can be given in a tooltip.

date input 5
Date Picker Components displays an error icon to indicate an invalid date. Hovering the icon displays error details.
data input 6
Date of Birth displays an error icon on invalid input. However, the invalid date should not be displayed for the month of February.

In a few forms, an error notification displays when the user submits the form after entering input.

data input 7
Getzephyr provides a date error message when a user submits the form

Providing error information along with a solution is a good way of error handling. However, it is better to provide an error indication along with the control instead of showing it on the top of the page when a user submits the form.

II. Date Selection in Date Picker Control

1. How to display Today’s date? 

In a few places, the currently selected date is much more prominent than today’s date, which is confusing for the user.

date input 8
Windows 10 Calendar displays the current selection more prominent on the UI than today’s date. 

Today’s date should be displayed in a state that is visible on the date picker and the user can easily see today’s date at first glance.

date 9
Google Calendar displays states of hover, selection, and today’s date in an understandable format

2. Is it better to provide built-in options?

At various places, users are given the most common options to select a date or date range. Users can select the option in single-click without navigating within the date picker control.

These common options can be Today, Yesterday, Tomorrow, Last week, Last month, Next Week, Next month, etc. depending on requirements.

Selecting the option will highlight the respective dates within calendar control.

date 10
Date Range Picker displays common options in the side panel to select the required date
date 11
Date Picker displays a few common options so that the user can select the required option in a single click

To select a date, it is better to provide the most common options in the first place so that the user can select the required option in a single click. However, the list should include simple and required options only instead of giving a long list including unnecessary details that will confuse the user.

3. How to display invalid Date options?

When the user selects a date, there can be some invalid options that are not applicable for input. For example, if the user is asked to provide the Depart date and Return date, then the Return date should not be earlier than the Depart date.

To prevent users from the selection of invalid dates, there can be different ways. 

One is to handle invalid inputs using a proper error-handling approach. However, another option is to make invalid options unavailable for selection.

This can be done by visually indicating the invalid date options in calendar control so that the user can select only valid options.

date picker 1
Oracle displays invalid dates in lighter grey disabled form
Nuento Web App displays invalid date options cut off on UI

It is a good approach to indicate invalid date options in calendar control so that error prevention can be done. However, a clear visual indication is required for this. Making the dates disabled in lighter grey color can be confusing as this is very common to use the same convention to indicate the dates that are not part of the current month.

4. Should complete weeks be shown, even when the month is not beginning by start of the week?

The date picker displays 7 days of a week in a row. The days can be started from Sunday or Monday as per cultural preference. However, a month may not begin by the start of the week. It means there can be few slots in the calendar control of a month that do not belong to that particular month. What can be done to these slots?

Either they can be left empty, or they can be filled with dates of previous and next months using a different color.

Daily UI Date Picker displays the full week in the Calendar control
date picker 10
Daily UI Date Picker displays dates in Red color that are not part of the current month
Calendar do not display dates that are not part of the current month if the month does not begin by start of week

Complete weeks should be shown in calendar control whether the month begins by the start of the week or not because it helps users get a complete picture of the week and makes selection easier for them. Also, it gives a complete visual look of the calendar.

A calendar control gives the user the option to navigate between months and years and then select the required date. There can be different ways to provide navigation to make an improved user experience.

The most common way is to click on the month name to display all months of the current year, then click on the year to display a list of years. This way user can select the required year and then month and then day.

Study Date Picker displays navigation between days, months, and years

Another option is to provide a layout of the calendar where the user can navigate any of the entities, years, months, and days within the same screen.

Date and Time Filters displays months and years on the front UI so that user can navigate between them. However, this leaves the user with more scrolling to select the required date.
date picker
Daily UI displays navigation of years, months, and days on the front UI
mobile date picker
Date Picker Daily UI displays intuitive UI to navigate between days, months, and years on mobile UI

One more way of doing so is to provide a list of months and years when the user clicks on the current month’s name.

Date Picker UI displays navigation of months and years in the form of drop-downs within Date Picker 

Navigation between months and years should be provided in a way that user can go easily to the required date using a lesser number of clicks. Keyboard navigation also helps in easier selection.

III. Date Range Selection

1. How to select a Date Range?

A date picker is used to select a Date range where the user has to define the start and end date of a task or process. This control usually displays along with two input boxes where the user can insert To and From dates.

For selecting a date range, the date picker can display two months side by side, and the user can navigate to see two next or previous months in the calendar.

The selected range is highlighted on the calendar UI.

datepicker 14
UI Ninja Challenge Date Range selection
date picker
Figma Daily UI Date Range Selection
date picker 20
Calendar Date Picker Date Range Selection

A flight application displays a plane icon for range selection in the calendar UI. This provides the user with a good experience related to the purpose for which he is selecting the date.

date picker 21
Date Picker Date Range Selection for travel date selection

The user selects the From date and then he selects To date. The calendar control highlights all the dates coming in the range of From to To.

Date Picker Date Range selection

A similar experience can be seen if the user selects subsequent dates in the calendar. Selecting two dates highlights both of them and if the user selects the third subsequent date, then the range of all three dates is highlighted.

2. How to display multiple months: horizontally or vertically?

Depending on the screen size you are working on, the two consecutive months can be displayed horizontally or vertically.

If you are designing your app for a mobile device, then obviously displaying two months horizontally may not be a good option.

UI Daily displays two months vertically on a mobile device
Date Picker displays consecutive months vertically on a mobile device

Want to Learn UX Design?

  • Try Interaction Design Foundation. IxDF offers online design courses that cover the entire spectrum of UX design, from foundational to advanced level. As a UX Design World reader, you get 25% off your first year of membership with the IxDF.
  • The UI/UX Design Specialization from Coursera brings a design-centric approach to user interface and user experience design and offers practical, skill-based instruction centered around a visual communications perspective. By learning this Design Specialization, you can design high-impact user experiences for your customers.

Thanks for reading.

Subscribe for more related articles at UX World.

If you have any questions, contact us here: Facebook | YouTube | Twitter Instagram | Linkedin

Leave a Comment

Your email address will not be published. Required fields are marked *