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
1441 Views
Answered

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
Answer

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

Disclaimer
This site is started with intent to serve the ASP.Net Community by providing forums (question-answer) site where people can help each other. The content posted here is free for public and is the content of its poster. The site does not provide any warranties for the posted content. If you feel any content is violating any terms please contact.
© 2021 www.aspsnippets.com All rights reserved | Privacy Policy | Powered by Excelasoft Solutions Excelasoft Solutions