JavaScriptAngularJSMaterial Design Date Picker For Angular Material

Material Design Date Picker For Angular Material

A Material Design date picker built with Angular Material and Moment.js. This cool material design date picker makes your angular shape more attractive, you can easily attach this date/time picker to your angular app.

Quick Look :-

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;
      });;
    }  
  }]);
})();

This awesome script developed by alenaksu. Visit their official repository for more information and follow for future updates.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About SAROJ MEHER

He is a Lecturer (English & Sociology), a professional Artist, and a blogger. He do paintings, sketches since his childhood. He is in the teaching field for 10 years. In this teaching line, he has experience in teaching English at High School and College levels. He has also experienced teaching computer theory and practicals during the school teaching period. He is in the Blogging field for more than 5 years.

Subscribe to our Newsletter

Get the Latest Article notification and Weekly Newsletters in your Inbox.

TRENDING ARTICLES

ARTICLESLATEST