BittBox

28 Datepickers for Website UI and Mobile Apps

by Jake Rocheleau
on May 7, 2015

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.

Stylized Picker

web dark dropdown datepicker

Dark iOS

dark ios date picker ui

Scheduler

scheduler white date picker ui

Madpicker

yellow texture gradient 3d picker

Dark Calendar

dark calendar ui date picker

Time & Date

time and date picker ui

Wooden Calendar

wooden calendar date picker ui

Date Range

custom date range picker

Calendar

calendar date dropdown picker

Range Select

date range select calendar

Light Calendar

light ui design calendar

Material Design

material design google datepicker

Datepicker Freebie(.Sketch)

freebie sketch file datepicker

Datepicker Redux

gradient select redux date picker

Web Interface

web user interface design

Flat Calendar

crm datepicker ui design

Dark Calendar

datepicker v2 ui design

Flat Calendar

calendar ui design flat

Fine Date Picker

blue fine date picker ui

Floating Calendar

floating calendar ui design

Flat Date

flat date picker tooltip calendar

Dark Blue Calendar

dark blue calendar ui design

Admin Template

admin date picker template

Blue Calendar

blue calendar design ui

Textured Calendar

textured calendar ui design

Green Tooltip

green tooltip calendar date picker

Light UI

light date picker interface

Dark Date & Time

dark date time picker ui

About Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design and web development techniques. You can check out his work on Dribbble and follow his tweets @jakerocheleau.

Top