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

  
    

      
mdPickers
      
Material Design date/time pickers
    
  
  
  
    
    
    

          

            
Date picker
            

              
Standard date picker
              
            
            

              
Disabled date picker
              
            
            

              
Custom format + error messages
              
                

                  
This is required
                  
Invalid format
                
              
            
            

              
Min/max date
              
                

                  
This is required
                  
Invalid format
                  
Min date
                  
Max date
                
              
            
            

              
Filtering date
              
            
            

              
Using $mdpDatePicker service
              show picker
              
                {{ currentDate | date:'shortDate' }}
              
            
          
          

            
Time picker
            

              
Standard time picker
              
              
            
            
            

              
Disabled time picker
              
            
            
            

              
Auto switch between hours and minutes
              
              
            
    
            

              
Custom format + error messages
              
                

                  
This is required
                  
Invalid format
                
              
            
            
            
    
            

              
Using $mdpTimePicker service
              show picker
              
                {{ currentTime | date:'HH:mm' }}
              
            
          
        
  

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

See live demo and download source code.
DEMO | DOWNLOAD

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

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