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.

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

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *