20 Best User Experience Datepicker Examples: Mobile & Web

Share on linkedin
Share on twitter
Share on facebook
Good_user_experience_datepicker_examples_Storyly (1)

Since the past few years, our reliance on mobile apps has been increasing on a constant basis. In fact, we are part of a generation that spends 57% of all digital media usage on mobile apps.  In such a competitive digital environment, providing the right sort of UX and UI controls in mobile apps is an ongoing challenge for app designers and product managers. And when we talk about these UI controls, date picker is always somewhere at the top of a designer’s priority list.

Date picker is a terminology widely used in the context of app UI/UX. This is defined as an input field that allows a user to select date via text input or app interaction with a calendar interface. This is one of the most commonly used UI controls that a user uses during an in-app form where date or time has to be selected – for instance, date of birth, online appointments, bookings, orders and deliveries.

 

Date Picker Control – Best Practices

While designing your date picker control, as an app designer, there are certain parameters and factors to keep in mind in order to make your date picker control effective, easy-to-use and meaningful. Here are some of the top elements that would make a difference to the way users interact with your date picker section, and eventually, the rest of the mobile app as well.

 

Date Input Format Control

This is a field where you can allow your app users to either select day, month and year in a single step or select it separately. This could either be input as text, or the user can click on the calendar icon from where the date can be selected. This is what the calendar clickable date picker looks like:

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

You can also use the dropdown box option where the user is shown three boxes for month, date and year respectively. The date range is from 1-31, month range from 1-12 and year dropdown will show all past, current and future years. Here is an example of the dropdown box format:

Best User Experience Datepicker Examples for Mobile and Web

Source: CSSScript

 

Equal Focus on Empty State

It is important to know that an empty state field should be as clear to your user as a filled out state is. When the fields are empty, users should be shown relevant input field’s actual numbers. For example, the acceptable date and time format should be shown on the field when the user hasn’t typed or interacted with this field. Here is a good example of the empty state of date field being quite visible and clear to the user:

Best User Experience Datepicker Examples for Mobile and Web

Source: Oracle

 

Validation and Error Handling

This is one of the key UI elements when designing the date picker section of your mobile app. At times, there are certain rules or pure logic that a user might overlook. For example, if you are selecting two dates in your travel app, one is for departure and the other one is for return, your return date cannot be sooner than your departure date. Here is a good example:

 

 

Whenever there is an error, the user should not only be notified about the error, but should also be provided with a suggestion to make it correct like this:

Best User Experience Datepicker Examples for Mobile and Web

Source: SmartBear

 

How to Show Today’s Date in Date Picker Control

It might sound very simple, however, when you are designing an effective date control picker according to your app, you might get confused as to how your user will be seeing today’s date. Below are two comparisons made between two calendars – Windows 10 and Google. You will observe that the way today’s date is shown in these two calendars is different. Windows 10 calendar highlights the current selection more than today’s date, this is something not advisable (this has been addressed by Windows 10 already). Here is the Windows 10 calendar (left) and Google Calendar (right):

Best User Experience Datepicker Examples for Mobile and Web

Source: Google Calendar and Windows 10 Calendar

 

Non-selectable Field Clarity

You need to make sure that your user knows which dates are not available for selection. Making your user click on an unavailable date and later telling him that the date is already taken by another customer doesn’t give a good impression. Consider the following image:

 

 

Date Fields not Part of Current Month

It is not necessary that a month will begin from the start of the week. In this case, it is advised to still show the dates of previous or next months, instead of keeping them empty.

 

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Best Date Picker Examples to Use in 2020

Now let us have a look at some of the best date picker UI designs and concepts that you can get inspiration from for your own mobile app.

 

Online Scheduler

Online date scheduling has become a rather common practice on both, mobile and web interfaces these days. If your mobile app doesn’t have a smooth feel to the datepicker, your user might not want to use the online scheduler in the first place.

 

Checkout

Specifically in hotel bookings, the checkout interface is a section that your user will have to interact with. Making it nice and simple, with absolute clarity regarding the dates and/or any period that falls in between the two dates, will increase user engagement and user satisfaction.

 

User Dashboard

A lot of web applications and programs these days have their dashboard or admin panels easily accessible through mobile apps. Such dashboards have datepicker interfaces for scheduling meetings, task execution, reminders, etc. Here is an example:

Best User Experience Datepicker Examples for Mobile and Web

Source: GitHub

 

Vertical View

Although quite rare in the datepicker UI designs for mobile apps, the vertical view can come in quite handy if you have extra space in the window, or if it suits your business needs.

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Keeping it Dark

There are a lot of built-in dark themes and modes in mobile OS these days. Matching your user mobile’s theme with a dark effect can increase user engagement.

 

 

Date Range

When it comes to date range selection, your user should be able to view all dates, unselected and selected, in a clear manner so that he knows what action he needs to take next in order to complete the transaction.

 

Flat Design

If you want to keep things nice and simple, the flat design for the date picker might work for your mobile app. Here is an example:

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Floating Design

Float design works for apps that have a similar theme or effect in other app sections or pages as well. If you want to keep a nice balance to your app throughout, your date picker can adopt this type of design to keep your UI top-notch. Here is an example of a floating design:

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Date Selection with Time

If you have to show the time section as well in your datepicker interface, you can go ahead with a design that looks something like this:

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Date Selection with Location

Adding location with your datepicker can give your user to interact with both date and location settings at once.

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Date Range Enhanced

Here is an optimized version of the modern-day date picker UI interface:

Best User Experience Datepicker Examples for Mobile and Web

Source: Dribble

 

Project Management

Project Management tools have a user dashboard with datepicker interfaces as the one shown below:

Best User Experience Datepicker Examples for Mobile and Web

Source: Bashooka

 

Designing a Flawless Datepicker – In a Nutshell

There is a lot of design innovation and ideas that can enhance your app’s UI/UX. On the contrary, it can also turn your users away from the app section where they have to fill an online form, schedule an appointment or book a ticket – if your datepicker or timepicker interface is not user-friendly enough. Elements like the input field, calendar themes, calendar overlay, ‘smart’ date and time input will play a vital role in the overall user experience of your app. The datepicker control should not require more than six taps by the user to achieve the desired result. If the user has to tap beyond that number, there is something not right with your datepicker control.

To sum it all up, being a designer, you need to pay a lot of heed to the datepicker UI control and make sure you provide a seamless and smooth user journey throughout that specific app section and eventually, the entire app. If your user has to put in a considerable amount of effort just to select dates, trust me, he would lose interest in your app sooner than you expect.

We hope we gave you loads of inspiration for your datepicker UI and UX for your mobile, app or website. If you want to read more on user experience, then take a look at our Heuristics and usability testing article. This will give you a guide on how to use the most popular UX frameworks to evaluate the usability of your app.

Leave a Reply

Storyly - Bring superb stories to your app | Product Hunt Embed

Recent Posts

Get the latest content first.

Storyly uses the information you provide to us to contact you about our relevant content, products, and services. For more information, check out our Privacy Policy.