Display validation if date is greater than N-Days from Current (Today) Date on Button Click in AngularJS

mahesh213
 
on Mar 31, 2020 11:43 PM
1609 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

Set Default Date in Bootstrap Datepicker in AngularJS

could you please help me

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Apr 01, 2020 01:18 AM

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