Home
Run »
<!DOCTYPE html> <html> <head> <!-- www.techstrikers.com --> <title>Date Test Sample</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('dateInputExample', []) app.run(function($rootScope){ $rootScope.angular = angular; }) app.controller('DateController', ['$scope', function($scope) { $scope.example = { value: new Date(2015, 10, 10), minDate: new Date(2015, 10, 01), maxDate: 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, 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()); 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 style="background-color:#DDE4E9;"> <fieldset style="background-color:#DDE4E9;"> <legend>AngulerJS Input Type Date Example</legend> <div ng-app="dateInputExample"> <form name="myForm" ng-controller="DateController"> <label for="exampleInput">Select a Date</label> <input type="date" id="exampleInput" name="input" ng-model="example.value" placeholder="yyyy-MM-dd" 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)}}</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)}}</p> </form> </div> </fieldset> </body> </html>