Display alert messages based upon two Date using Bootstrap UI Date picker in AngularJS

mahesh213
 
on Jan 23, 2020 10:32 PM
Sample_161221.zip
1917 Views

Hi,

I have 2 datetime fields

From date and To date

currently my requirement is that 

after clicking of save button

1)if from date and to date are not same then display one alert message

2) Todate time should be greater than from date

Could you please help me

 

@{ 
    Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .form-horizontal {
            width: 300px;
        }

        .datetime-picker-dropdown > li.date-picker-menu div > table .btn-default {
            border: 0;
        }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.0/ui-bootstrap-tpls.js"></script>
    <script src="~/scripts/datetime-picker.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);
        app.controller('MyController', ['$scope', function ($scope) {
            $scope.Date = new Date("2020/01/13 15:30");
            $scope.OpenCalendar = function () {
                $scope.IsOpen = true;
            };
            $scope.OpenCalendar1 = function () {
                $scope.IsOpen1 = true;
            };
            $scope.Save = function () {

            }
        } ]);
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-5">
                    <div class="input-group">
                        <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm:ss" d@*atetime-picker="yyyy-MM-dd HH:mm:ss"*@ ng-model="Date"
                               is-open="IsOpen" ng-click="OpenCalendar()" />
                        <p>Selected Date: {{ Date| date:'dd-MM-yyyy HH:mm:ss' }}</p>
                    </div>
                </div>
                <div class="col-sm-5">
                    <div class="input-group">
                        <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm:ss" d@*atetime-picker="yyyy-MM-dd HH:mm:ss" *@ ng-model="Date1"
                               is-open="IsOpen1" ng-click="OpenCalendar1()" />
                        <p>Selected Date: {{ Date1| date:'dd-MM-yyyy HH:mm:ss' }}</p>
                    </div>
                </div>
            </div>
        </form>
        <button type="button" value="Save()" ng-click="Save()"></button>
    </div>
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jan 23, 2020 11:59 PM

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .form-horizontal
        {
            width: 300px;
        }
        
        .datetime-picker-dropdown > li.date-picker-menu div > table .btn-default
        {
            border: 0;
        }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.0/ui-bootstrap-tpls.js"></script>
    <script type="text/javascript" src="datetime-picker.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', ['ui.bootstrap', 'ui.bootstrap.datetimepicker']);
        app.controller('MyController', ['$scope', '$window', function ($scope, $window) {
            $scope.OpenCalendar = function () { $scope.IsOpen = true; };
            $scope.OpenCalendar1 = function () { $scope.IsOpen1 = true; };
            $scope.Save = function () {
                var from = $scope.Date;
                var to = $scope.Date1;
                if ((Date.parse(to) <= Date.parse(from))) {
                    $window.alert("To date should be greater than from date");
                }
            }
        } ]);
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-6">
                <div class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm:ss" datetime-picker="yyyy-MM-dd HH:mm:ss"
                        ng-model="Date" is-open="IsOpen" ng-click="OpenCalendar()" />
                    <p>Selected Date: {{ Date| date:'dd-MM-yyyy HH:mm:ss' }}</p>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <input type="text" class="form-control" datetime-picker="dd-MM-yyyy HH:mm:ss" datetime-picker="yyyy-MM-dd HH:mm:ss"
                        ng-model="Date1" is-open="IsOpen1" ng-click="OpenCalendar1()" />
                    <p>Selected Date: {{ Date1| date:'dd-MM-yyyy HH:mm:ss' }}</p>
                </div>
            </div>
        </div>
        </form>
        <button type="button" value="Save" ng-click="Save()">Save</button>
    </div>
</body>
</html>

Screenshot