20 Best Material Design Date & Time Picker

A modern, beautiful Material Design styled datetime picker component. We have share the 20 best Material Design date & time picker. All picker beautiful created modal, built for the web.

1 – Material Design Date Picker

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

2 – Elegant Customizable Date Picker In AngularJS

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

Demo Download

3 – FlexCalendar

FlexCalendar

An Elegant Calendar built with Angular.js

Demo Download

4 – Angular datepicker

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

5 – ADM-dateTimePicker

ADM-dateTimePicker

 

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

Demo Download

 

6 – AngularJS Circular Time Picker

angular-circular-timepicker

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

Demo Download

 

7 – Angular Clock Widget

Angular-Clock-Widget

Responsive, beautiful clocks for AngularJS built using SVG

Demo Download

 

8 – SM Date, Time and Range Picker

SM-Date-Time-and-Range-Picker

Demo Download

 

9 – AngularJS Material Calendar

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

 

10 – Date Range Picker for Angular and Bootstrap

Date-Range-Picker-for-Angular-and-Bootstrap

Demo Download

 

11 – Date Range Picker for Bootstrap

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

12 – Material Design date/time pickers

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

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

AngularJS-Responsive-Calendar

A pure AngularJS responsive calendar directive

Demo Download

 

15 – Datetime Range Picker

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

jQuery-ui-material-design-datepicker

Demo & Source

 

18 – Material Datepicker

Material-Datepicker

Demo & Source

 

19 – sc-date-time

sc-date-time

A Date-Time picker based on Googles Material Design Spec

Demo Download

 

20 – Bootstrap Material DatePicker

Bootstrap-Material-DatePicker

Demo Download

Posted on in and tagged