AngularJS Input Type DateTime

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

Note: Many modern browsers do not yet support this input type.

AngularJS Input Type DateTime Syntax

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

AngularJS Input Type DateTime Arguments

Here is a list of AngularJS Input Type DateTime Arguments.

Directives	Description
ng-model	AngularJS expression to bind the data.
name (optional)	Name of the control input control.
min (optional)	The valid date string (yyyy-MM-dd). This is used to set minimum date validation.
max (optional)	The valid date string (yyyy-MM-dd). This is used to set maximun date validation.
ng-min (optional)	AngularJS expression sets the min validation constraint to the Date .
ng-max (optional)	AngularJS expression sets the max validation constraint to the Date .
required (optional)	Validate input type date 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 DateTime Example

<!DOCTYPE html>  
<html>  
<head>  
<title>DataTime Test Sample</title>  
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>   
<script>  
  var app = angular.module('datetimeInputExample', [])  
     app.run(function($rootScope){  
      $rootScope.angular = angular;  
    })  
     app.controller('DateController', ['$scope', function($scope) {  
       $scope.example = {  
         value: new Date(2015, 10, 10,14, 57),  
         minDate: new Date(2015, 10, 01,14, 57),  
         maxDate: new Date(2015, 10, 30,14, 57)  
         };  
         $scope.Compare  = function (DateA,DateB) {  
            var a = new Date(DateA);  
              var b = new Date(DateB);  
              var msDateA = Date.UTC(a.getFullYear(), a.getMonth()-1, a.getDate());  
              var msDateB = Date.UTC(b.getFullYear(), b.getMonth()-1, b.getDate());  
  
              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()) + "-" +   
            (((dateA.getDate()).toString().length == 1) ? "0" + dateA.getDate() :   
            dateA.getDate()) + " " +   
            ("0" + dateA.getHours()).slice(-2) + ":" +   
            ("0" + dateA.getMinutes()).slice(-2);  
            return dt;  
        };  
         $scope.greaterDate = function()  
         {  
              var dateA = new Date($scope.example.maxDate);  
              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.minDate);  
              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>  
<fieldset style="background-color:#DDE4E9;">      
    <legend>AngulerJS Input Type DateTime Example</legend>   
<div ng-app="datetimeInputExample">  
    <form name="myForm" ng-controller="DateController">  
       <label for="exampleInput">Select a DateTime</label>  
       <input type="datetime-local" id="exampleInput" name="input" ng-model="example.value"  
           placeholder="yyyy-MM-ddTHH:mm:ss"  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.maxDate) |   
        date: "yyyy-MM-ddTHH:mm:ss"}}</p>  
  
        <p style="font-family:Arial;color:red;background:steelblue;padding:3px;width:350px;"   
        ng-if='lesserDate()'>Date should be greater than {{getDate(example.minDate) |   
        date: "yyyy-MM-ddTHH:mm:ss"}}</p>  
    </form>  
</div>  
      </fieldset>  
</body>  
</html>

Above example will produce following output