mahesh213
on Mar 31, 2020 11:43 PM
4153 Views
Hi,
How to display validation if date is greater than 10 days in future
I have one datepicker and submit button
what ever entered date is greater than 10 days in future
if i have entered grater than 10 days in future disaply validation message
Ex:Today date is 1-04-2020
but here i have entered 11-04-2020
then display validation message after clicking of submit button
could you please help me
Download FREE API for Word, Excel and PDF in ASP.Net:
Download
Hi mahesh213,
Refer below code.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', []);
app.directive('datepicker', function () {
return {
restrict: 'A',
// Always use along with an ng-model
require: '?ngModel',
link: function (scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$render = function () {
element.datepicker('update', ngModel.$viewValue || '');
};
element.datepicker().on("changeDate", function (event) {
scope.$apply(function () {
ngModel.$setViewValue(event.date);
});
});
}
};
});
app.controller('MyController', function ($scope) {
var firstDay = (new Date().getMonth() + 1) + "/01/" + new Date().getFullYear();
$scope.eventdate = firstDay;
$scope.Validate = function () {
var currentDate = new Date();
var eventDate = new Date($scope.eventdate);
var diffTime = eventDate.getTime() - currentDate.getTime();
var daysDiff = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
if (daysDiff >= 10) {
alert("Invalid Date.");
}
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<input datepicker ng-model="eventdate" />
<input type="button" value="submit" ng-click="Validate()" />
</body>
</html>
Demo
