20 Awesome Material Design Date & Time Picker

Calendar and date interfaces are widely used among developers and is one of the most important parts of web designing. We have catalogued the 20 awesome Material Design date & time picker for you to choose. Some are more developed than others and each plugin has its own set of benefits. They will decorate your webpage and add some key usability focused validation to your forms.

• 28 Creative Menu with Material Design
• Material Design Resources For Web Designer And Web Developer
• 25+ Examples of Material Design With Awesome Effects
• 25 Awesome Material Design Cards Concept

1 – ADM-dateTimePicker

Pure AngularJs Gregorian and Jalali smart dateTimePicker by ADM | Amirkabir Data Miners

Demo Download

2 – AngularJS Circular Time Picker

Native AngularJS datetime picker element directive with a circular interface for time

Demo Download

3 – Angular Clock Widget

Responsive, beautiful clocks for AngularJS built using SVG

Demo Download

4 – SM Date, Time and Range Picker

Demo Download

5 – AngularJS Material Calendar

A calendar directive for AngularJS and Angular Material Design. It’s lightweight at ~2.1 kB, and has a lot of configurability.

Demo Download

6 – Date Range Picker for Angular and Bootstrap

Demo Download

7 – Date Range Picker for Bootstrap

This date range picker component for Bootstrap creates a dropdown menu from which a user can select a range of dates

Demo Download

8 – Material Design Date Picker

This module is a simple date picker for those who writes project with Angular Material and wants an alternative date picker to the standard one. It built with Angular Material and Moment.js

Demo Download

9 – Elegant Customizable Date Picker In AngularJS

An elegant, easily customizable datepicker in Angular built on top of Datepicker by fulup-bzh

Demo Download

10 – FlexCalendar

An Elegant Calendar built with Angular.js

Demo Download

11 – Angular datepicker

RM-DATEPICKER is a directive for angular js. It allows you to render a responsive datepicker inline or as a modal on input focus. The rm-datepicker is very nice, is responsive, fast and user friendly. It is well optimized and lightweight (around 5 kb) and has no other dependencies than Angular itself.

Demo Download

12 – Material Design date/time pickers

Material Design date/time pickers built with Angular Material and Moment.js

Demo Download

13 – Angular Material Datepicker

Angular Material Datepicker is an AngularJS directive that generates a modal datepicker calendar just by clicking on the event icon.

Demo Download

14 – AngularJS Responsive Calendar

A pure AngularJS responsive calendar directive

Demo Download

15 – Datetime Range Picker

An angular directive that includes a Datepicker and a time range picker

Demo Download

16 – Angular Datepicker

Angular datepicker is an angularjs directive that generates a datepicker calendar on your input element.

Demo Download

17 – jQuery ui material design datepicker

Demo & Source

18 – Material Datepicker

Demo & Source

19 – sc-date-time

A Date-Time picker based on Googles Material Design Spec

Demo Download

20 – Bootstrap Material DatePicker

Demo Download