HTML codes:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-messages.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="validationExample">
<div ng-controller="MyCtrl as vm">
<form name="myForm" novalidate="" ng-submit="vm.submitted(myForm, vm.input)">
<span class="input-label">Start Date</span>
<input type="date" name="startDate" ng-model="vm.input.startDate" required />
<span ng-messages="myForm.startDate.$error" ng-messages-include="errors-template.html"></span>
<br />
<span class="input-label">End Date</span>
<input type="date" name="endDate" ng-model="vm.input.endDate" start-date="{{vm.input.startDate.yyyymmdd()}}" compare-with-start-date />
<span ng-messages="myForm.endDate.$error" ng-messages-include="errors-template.html"></span>
<br />
<button>submit</button>
</form>
</div>
<!-- error messages template -->
<script id="errors-template.html" type="text/ng-template">
<span ng-message="required">* required!</span>
<span class="form-error" ng-message="checkEndDate">* end date cannot be earlier than start date</span>
</script>
</body>
</html>
JavaScript codes:
var myApp = angular.module('validationExample', ['ngMessages'])
myApp.controller('MyCtrl', [function () {
var vm = this;
vm.submitted = function(form, input) {
if(form.$valid) {
alert('submitted');
}
}
} ]);
myApp.directive("compareWithStartDate", function () {
return {
restrict: "A",
require: "?ngModel",
link: function (scope, element, attributes, ngModel) {
validateEndDate = function (endDate, startDate) {
if (endDate && startDate) {
startDate = new Date(startDate);
startDate.setHours(0, 0, 0, 0);
endDate = new Date(endDate);
endDate.setHours(0, 0, 0, 0);
return endDate >= startDate;
}
else {
return true;
}
}
// use $validators.validation_name to do the validation
ngModel.$validators.checkEndDate = function (modelValue) {
var startdate = Date.parse(attributes.startDate);
var enddate = modelValue;
return validateEndDate(enddate, startdate);
};
// use $observe if we need to keep an eye for changes on a passed value
attributes.$observe('startDate', function (value) {
var startdate = Date.parse(value);
var enddate = Date.parse(ngModel.$viewValue);
// use $setValidity method to determine the validation result
// the first parameter is the validation name, this name is the same in ng-message template as well
// the second parameter sets the validity (true or false), we can pass a function returning a boolean
ngModel.$setValidity("checkEndDate", validateEndDate(enddate, startdate));
});
}
};
});
// function to parse date time object into yyyy-mm-dd format string
Date.prototype.yyyymmdd = function () {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1] ? mm : "0" + mm[0]) + '-' + (dd[1] ? dd : "0" + dd[0]);
};
See the example in Plunker.
5 comments:
Why we need to write any code if we can do all these by just setting the textbox attributes like in start date and end date
max-date='enddate' // in start textbox
min-date='startdate' // in end textbox
see for more detail:
http://www.advancesharp.com/blog/1198/angularjs-bootstrap-datepicker-enable-disable-dates-with-configuration-exapmle
Hi Ali,
In the example, I don't want to add/use bootstrap module and all other required files. I have another UI library that I use and I want this function to be lightweight. The date input can use the simple date input control from HTML 5, unless if there is a need to use more advanced features.
Very useful Date Validation on AngularJS
Angularjs Training in Chennai
Hi ,
i want to use same logic with datepicker of bootstrap ,please help
How to compare two dates like my admission date should not be Greater than the Current date???Please tell me how to implement this for ANGULAR7 project in my .ts file?? Please anyone can tell if???
Post a Comment