Awesome Open Source
Awesome Open Source

Angular Material DateTimePicker

An Angular Material based, an Android style date-time picker. Some basic functionalities are:

  • Double click to select date or time
  • Swipe left to go to next month or Swipe right to go to previous month.
  • Disable the set of continous or non-continous date sets.
  • Jump to current day
  • Highlight Week days (Business Days)
  • Display week number (in header)
  • Weekdays as per browser language


Date Author Description
2016-11-21 AmittK Extended version of angular-material-datetimepicker
2017-04-14 AmittK Changes to the display structure of date and month
2017-07-26 AmittK Jump to today date is introduced
2017-07-28 AmittK Highlight only week-days (working business days)
2017-07-30 AmittK Displaying the week number in header, UI updated
2017-07-30 AmittK UI updated with icons and tooltips


Depends on the following library:

  • Angular Material & it's dependencies
  • Angular Touch
  • MomentJS

Installing via Bower

bower install extended-datetimepicker

Installing via Npm

npm install extended-datetimepicker

Live Example

Click [here] ( to visualize live examples.


Add the plugin module as a dependency to your AngularJS module:

    angular.module('myAwesomeModule', [
      //other dependencies ignored

This plugin exposes a directive which should be used as an attribute for an input element. The directive is mdc-datetime-picker. An example of this is given below:

    <md-input-container flex-gt-md="30">
        <label>Timepicker Only</label>
        <input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
               format="hh:mm a"

Directive Attributes

The directive accepts several attributes which are described below:

Name Type Description
ng-model (String|Date|Moment) Initial Date or model to assign the date to
format String MomentJS Format,defaults to HH:mm for time picker only, YYYY-MM-DD for date picker only and YYYY-MM-DD HH:mm for both timepicker and date picker
short-time Boolean true => Display 12 hours AM|PM
min-date (String|Date|Moment) Minimum selectable date
max-date (String|Date|Moment) Maximum selectable date
date Boolean true => Has Datepicker (default: true)
time Boolean true => Has Timepicker (default: true)
cancel-text String Text for the cancel button (default: Cancel)
ok-text String Text for the OK button (default: OK)
disable-dates Date[] Dates to be disabled or not selectable by user.
week-days Boolean true => Highlight only working days (default: false).

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,555,917
Angular (12,689
Angularjs (3,276
Calendar (1,943
Angular Material (872
Picker (586
Moment (253
Related Projects