AngularJS Input Type Month

The AngularJS input types are HTML input element control and used togather with ng-model directive. AngularJS input type Month can be decorate with various AngularJS arguments like name, ng-required, ng-min, ng-max and ng-change.

Syntax

<input type="month"
       ng-model="string"
       [name="string"]
       [min="string"]
       [max="string"]
       [ng-min=""]
       [ng-max=""]
       [required="string"]
       [ng-required="string"]
       [ng-change="string"]>

AngularJS Input Type Month Arguments

Here is a list of AngularJS Input Type Month Arguments.

Directives	Description
ng-model	AngularJS expression to bind the email.
name (optional)	Name of the control input control.
ng-min (optional)	AngularJS expression sets the min validation constraint to the Month.
ng-max (optional)	AngularJS expression sets the max validation constraint to the Month.
required (optional)	Validate input type email is required.
ng-required (optional)	AngularJS expression ngRequired expression evaluates to true.
ng-change (optional)	AngularJS expression to be executed when input value changes.

AngularJS Input Type Month Example

<!DOCTYPE html>  
<html>  
<head> <!-- www.techstrikers.com -->  
<title>AngularJS Input Type Month</title>  
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>   
   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>  
<script>  
  var app = angular.module('monthInputExample', [])  
     app.run(function($rootScope){  
      $rootScope.angular = angular;  
    })  
     app.controller('MonthController', ['$scope', function($scope) {  
       $scope.example = {  
         value: new Date(2015, 10, 10),  
         minMonth: new Date(2015, 10, 01),  
         maxMonth: new Date(2015, 10, 30)  
         };  
         $scope.Compare  = function (DateA,DateB) {  
            var a = new Date(DateA);  
              var b = new Date(DateB);  
              var msDateA = Date.UTC(a.getFullYear(), a.getMonth()-1);  
              var msDateB = Date.UTC(b.getFullYear(), b.getMonth()-1);  
  
              if (parseFloat(msDateA) < parseFloat(msDateB))  
              {  
                return -1;  // less than  
                }  
              else if (parseFloat(msDateA) == parseFloat(msDateB))  
                return 0;  // equal  
              else if (parseFloat(msDateA) > parseFloat(msDateB))  
                return 1;  // greater than  
              else  
                return null;  // error  
        };  
        $scope.getDate = function(dateA)  
        {     
            var dt = dateA.getFullYear() + "-" + dateA.getMonth();  
            return dt;  
        };  
         $scope.greaterDate = function()  
         {  
           
              var dateA = new Date($scope.example.maxMonth);  
              var dt = dateA.getFullYear() + "-" + (dateA.getMonth()) + "-" + (((dateA.getDate()).toString().length == 1)   
              ? "0" + dateA.getDate() : dateA.getDate());  
              return ($scope.Compare($scope.example.value , dt) == 1) ? true : false;  
         };  
         $scope.lesserDate = function()  
         {  
              var dateA = new Date($scope.example.minMonth);  
              var dt = dateA.getFullYear() + "-" + (dateA.getMonth()) + "-" + (((dateA.getDate()).toString().length == 1)   
              ? "0" + dateA.getDate() : dateA.getDate());  
              return ($scope.Compare($scope.example.value ,dt) == -1) ? true : false;  
         };  
     }]);  
</script>  
</head>  
<body style="background-color:#DDE4E9;">  
  <fieldset style="background-color:#DDE4E9;">    
    <legend>AngulerJS Input Type Month Example</legend>    
<div ng-app="monthInputExample">  
    <form name="myForm" ng-controller="MonthController">  
       <label for="exampleInput">Select a Date</label>  
       <input id="exampleInput" type="month" name="input" ng-model="example.value"
     placeholder="yyyy-MM" required  />  
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='!myForm.input.$valid'>Select valid date</p>  
        <p style="font-family:Arial;color:#ffffff;background:blue;padding:3px;width:350px;"   
        ng-if='!!myForm.$error.required'>Date is required</p>  
          
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='greaterDate()'>Date should be less than {{getDate(example.maxMonth)}}</p>  
  
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='lesserDate()'>Date should be greater than {{getDate(example.minMonth)}}</p>  
    </form>  
</div>  
      </fieldset>   
</body>  
</html>

Above example will produce following output