Material Design Date Picker For Angular Material

A Material Design date picker built with Angular Material and Moment.js. This cool Material design looking datepicker makes your angular form more attractive, you can easily integrate this datetime picker on your angular app.

HTML

<md-content id="content" layout="column" flex ng-app="app" ng-controller="MainCtrl as ctrl">
  <md-toolbar class="md-whiteframe-z2">
    <div style="text-align: center;">
      <h1>mdPickers</h1>
      <h2>Material Design date/time pickers</h2>
    </div>
  </md-toolbar>
 
  <md-content flex layout="column" layout-align="center center" layout-padding>
 
 
    <div layout="row" ng-form="demoForm">
          <div layout-padding>
            <h2>Date picker</h2>
            <div>
              <h4 class="md-subhead">Standard date picker</h4>
              <mdp-date-picker mdp-placeholder="Date" ng-model="currentDate"></mdp-date-picker>
            </div>
            <div>
              <h4 class="md-subhead">Disabled date picker</h4>
              <mdp-date-picker mdp-placeholder="Date" mdp-disabled="true" ng-model="currentDate"></mdp-date-picker>
            </div>
            <div>
              <h4 class="md-subhead">Custom format + error messages</h4>
              <mdp-date-picker mdp-open-on-click required name="dateFormat" mdp-placeholder="My date(dd/mm/yyyy)" mdp-format="DD/MM/YYYY" ng-model="currentDate">
                <div ng-messages="demoForm.dateFormat.$error">
                  <div ng-message="required">This is required</div>
                  <div ng-message="format">Invalid format</div>
                </div>
              </mdp-date-picker>
            </div>
            <div>
              <h4 class="md-subhead">Min/max date</h4>
              <mdp-date-picker name="minMaxDate" mdp-placeholder="Date" mdp-min-date="'2000-01-01'" mdp-max-date="'2005-01-01'" ng-model="currentDate">
                <div ng-messages="demoForm.minMaxDate.$error">
                  <div ng-message="required">This is required</div>
                  <div ng-message="format">Invalid format</div>
                  <div ng-message="minDate">Min date</div>
                  <div ng-message="maxDate">Max date</div>
                </div>
              </mdp-date-picker>
            </div>
            <div>
              <h4 class="md-subhead">Filtering date</h4>
              <mdp-date-picker mdp-placeholder="Date" mdp-date-filter="ctrl.filterDate" ng-model="currentDateMinMax"></mdp-date-picker>
            </div>
            <div>
              <h4 class="md-subhead">Using $mdpDatePicker service</h4>
              <md-button class="md-raised md-warn" ng-click="ctrl.showDatePicker($event)" aria-label="show picker">show picker</md-button>
 
                {{ currentDate | date:'shortDate' }}
 
            </div>
          </div>
          <div layout-padding>
            <h2>Time picker</h2>
            <div>
              <h4 class="md-subhead">Standard time picker</h4>
 
              <mdp-time-picker ng-model="currentDate"></mdp-time-picker>
            </div>
 
            <div>
              <h4 class="md-subhead">Disabled time picker</h4>
              <mdp-time-picker mdp-disabled="true" ng-model="currentDate"></mdp-time-picker>
            </div>
 
            <div>
              <h4 class="md-subhead">Auto switch between hours and minutes</h4>
 
              <mdp-time-picker mdp-auto-switch="true" ng-model="currentTime"></mdp-time-picker>
            </div>
 
            <div>
              <h4 class="md-subhead">Custom format + error messages</h4>
              <mdp-time-picker name="timeFormat" ng-model="currentTimeText" mdp-format="HH:mm A">
                <div ng-messages="demoForm.timeFormat.$error">
                  <div ng-message="required">This is required</div>
                  <div ng-message="format">Invalid format</div>
                </div>
              </mdp-time-picker>
            </div>
 
            <input type="time" ng-model="test" mdp-time-picker />
 
            <div>
              <h4 class="md-subhead">Using $mdpTimePicker service</h4>
              <md-button class="md-raised md-warn" ng-click="ctrl.showTimePicker($event)" aria-label="show picker">show picker</md-button>
 
                {{ currentTime | date:'HH:mm' }}
 
            </div>
          </div>
        </div>
  </md-content>
</md-content>

CSS

body {
  font-family: 'Roboto', sans-serif;
}
#content {
  height: 100%;
}
#content > md-content {
  background-color: #eee;
}

JS

(function() {
    var module = angular.module("app", [
    "ngMaterial",
    "ngAnimate",
    "ngAria",
    "ngMessages",
    "mdPickers"
  ]); 
 
  module.controller("MainCtrl", ['$scope', '$mdpDatePicker', '$mdpTimePicker', function($scope, $mdpDatePicker, $mdpTimePicker){
    $scope.currentDate = new Date();
    this.showDatePicker = function(ev) {
        $mdpDatePicker($scope.currentDate, {
        targetEvent: ev
      }).then(function(selectedDate) {
        $scope.currentDate = selectedDate;
      });;
    };
 
    this.filterDate = function(date) {
      return moment(date).date() % 2 == 0;
    };
 
    this.showTimePicker = function(ev) {
        $mdpTimePicker($scope.currentTime, {
        targetEvent: ev
      }).then(function(selectedDate) {
        $scope.currentTime = selectedDate;
      });;
    }  
  }]);
})();

Download Details:

Live Demo: https://bit.ly/39R7ZJo

GitHub: https://bit.ly/3gsf5qd

#angular.js #angular