User Experience

20 Best User Experience Date Picker Examples: Mobile & Web

Aykut Bal
June 22, 2022

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 user experience (UX) and user interface (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 choose a 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

Do you need to design a date picker online 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 selector 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:

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:

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 design being quite visible and clear to the user:

Validation and Error Handling

This is one of the key UI elements when designing the date picker for mobile apps. 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.

How to Show Current 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 calendar layout designs – Windows 10 and Google. You will observe that the way today’s date is shown in these two calendars is different. Windows 10 date calendar design 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):

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 them 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. This is a good option for the best time picker UX design.

Best Date Picker Examples to Use in 2021

Now let us have a look at some of the best UI date picker examples 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 date picker, your user might not want to use the online scheduler in the first place.

Pumpkin

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. You can utilize this method both for mobile date picker designs and web date picker designs.

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 date picker interfaces for scheduling meetings, task execution, reminders, etc. Here is an example:

Vertical View

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

SOURCE: DRIBBLE

Keeping it Dark

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

SOURCE: DRIBBLE

Date Range

When it comes to input 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 style as a calendar design pattern might work for your mobile app. Here is an example:

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 calendar picker can adopt this type of design to keep your UI top-notch. Here is an example of a floating design:

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:

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.

SOURCE: DRIBBLE

Date Range Enhanced

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

SOURCE: DRIBBLE

Project Management

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

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.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

How to customize formatting for each rich text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor pretium massa sagittis cursus. Etiam egestas turpis vitae sem mattis semper placerat in nibh. Nullam tempus ligula sit amet turpis laoreet, et interdum purus hendrerit. Donec tortor massa, ultricies vitae laoreet a, facilisis quis orci.

Pellentesque rutrum erat eget neque accumsan porttitor. Aenean id consequat orci. Aliquam euismod finibus lacus, eu ultrices mauris interdum eu. Nulla tempor ac risus vel congue. Integer imperdiet purus ut turpis ultricies consequat.
  • Sed sagittis, ipsum pellentesque luctus porttitor
  • metus nisl vehicula ex, ut bibendum dui lectus ac odio
  • In faucibus laoreet malesuada. Fusce finibus eros vel nisl sodales congue.
  • Duis in massa mi. Donec venenatis, lectus interdum scelerisque pellentesque, orci lorem maximus ante, fermentum scelerisque dolor est eget nisl.
  • Cras aliquam pulvinar hendrerit. Morbi blandit auctor risus vitae consectetur. Sed auctor mauris eu velit imperdiet tincidunt.
  1. Sed sagittis, ipsum pellentesque luctus porttitor
  2. Ut quis dapibus elit. Nunc non sagittis quam.
  3. Nullam est est, posuere eget orci et, laoreet pharetra tortor.
  4. Nulla felis nisl, viverra sit amet mi id, volutpat ornare est. Ut ullamcorper sed dui sit amet pellentesque. Donec vel lectus id ipsum varius pellentesque et nec elit.
Read more like this
July 1, 2022

Four Features that Maximize Engagement for Web Stories

If you’re familiar with Storyly, it’s likely that you’re also familiar with all the ways that Stories can help brands achieve their engagement and revenue goals. But did you know that we also offer Story capabilities for websites? The same benefits of adding a Story layer to apps are now accessible for websites as well, and we’re constantly adding new features to make them even more fun and effective. Let’s take a look at some of the recent upgrades for Web Stories!
Product
June 15, 2022

Stories: The Leading Mobile Format

Stories are the most popular mobile content form today. What makes them so delightful and how can mobile brand make the most of them? Learn now!
Mobile Marketing
In-App Stories

Subscribe our blog

Get the latest post in your email.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.