28 Datepickers for Website UI and Mobile Apps

This page may contain links from our sponsors. Here’s how we make money.

User interfaces are littered with buttons and features just waiting for user interaction. While the standard elements are rather simple to design, complex items like date pickers require more attention to detail.

This gallery focuses on date picker design for website layouts and mobile applications. Date pickers are commonly associated with calendars and input fields meant to specify dates or date ranges. These interfaces are difficult to design without some sort of direction. If you're looking for date picker style ideas follow along with these examples and try to mimic the best features in your own work.


Spa Checkout

Spa Checkout

You can easily drag between different date selections and this interface is really cool to use on touch-screen devices.



Dates are displayed in a lateral way and this interface is really suitable to be used on touch-screen devices.

Dashboard #3

Dashboard #3

Small date range box can be used on different types of software and devices.

Dark iOS

Dark iOS

Really clean, sophisticated and enhanced view of the small date picker. It can be used on a lot of different applications and patterns.



All the different kinds of detailed outlooks are available at one single place.


Mad picker

Easy to mark any special event or similar type of stance in relation to the particular date.

Dark Calendar

dark calendar

A cool interface date picker that can be used for the variety of different functions and stances.

Wooden Calendar

wooden calendar

The interface with wooden background and colorful attributes.

Date Range

date range picker

You can select among the selection of different date ranges and you can do it with great ease.

Range Select

date range select calendar

Another simple and easy-to-use interface with great attributes.

Light Calendar

light ui design calendar

You can manage to navigate among different years easily and really a dynamic interface for a wide range of applications and software.

Material Design

material design google datepicker

A kind of sophisticated visual output as seen in most android devices.

Datepicker Freebie(.Sketch)

freebie sketch file datepicker

You will be able to come up with your own idea once you go through examples like this.

Datepicker Redux

gradient select redux date picker

Nice colors and interface allows you to select all the dates with prominent colors.

Web Interface

web user interface design

This calendar appears to be as a tabular data and dates are highlighted in unique fashion.

Flat Calendar

crm datepicker ui design

You can select among variety of dates using drop-down menu and there are many other superb ways to display information as well.

Dark Calendar

datepicker v2 ui design

Another simple and easy-to-use interface with great attributes.

Flat Calendar

calendar ui design flat

You can manage to navigate among different years easily and really a dynamic interface for a wide range of applications and software.

Fine Date Picker

blue fine date picker ui

Set of dates can be pinpointed at the same time thus making it convenient to use for both personal as well as professional use.

Floating Calendar

floating calendar ui design

Simple yet beautiful interface with dense colors to support the whole outlook.

Flat Date

flat date picker tooltip calendar

Nice and supportive interface to support all kinds of software and platforms.

Dark Blue Calendar

dark blue calendar ui design

Nice and wise combination of colors to produce a beautiful interface.

Admin Template

admin date picker template

Similar interface with different theme and set of colors.

Blue Calendar

blue calendar design ui

Nice outlook and unique way of selection of dates that make it favorable to use for different purposes. 

Textured Calendar

textured calendar ui design

Font color, font size, background color, way of selection of dates, borders and such type of other things determine the design of your own customized date picker.

Green Tooltip

green tooltip calendar date picker

The colors do matter when you design an interface for selection of different dates. 

Light UI

light date picker interface

The multiple calendars open side-by-side thus you can do more stuff with the range of dates.

Dark Date & Time

dark date time picker ui

The amazing display of how the dark colors can combine to constitute a beautiful and light interface.