Angular Bootstrap UI Datepicker

by Kondal Durgam

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<div class="container" ng-app="demoApp" ng-controller="demoController">
    <div id="demoForm" name="demoForm" ng-form="demoForm" novalidate>
        <div class="col-md-4">
            <label class="control-label">Available Date</label>
            <div class="input-form">
                <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="AvailableDate" name="availabledate" is-open="availableDatePopup.opened" datepicker-options="availableDateOptions" ng-required="true" close-text="Close" ng-click="OpenAvailableDate()"
                ng-change="ChangeExpiryMinDate(AvailableDate)" placeholder="Available Date" />
                <label ng-show="showMessages && addJobForm.availabledate.$invalid" class="text-danger">
                    Available Date is required.
                </label>
            </div>
        </div>
        <div class="col-md-4">
            <label class="control-label">Expire Date</label>
            <div class="input-form">
                <input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}" ng-model="ExpireDate" name="expiredate" is-open="expireDatePopup.opened" datepicker-options="expireDateOptions" ng-required="true" close-text="Close" ng-click="OpenExpireDate()"
                placeholder="Expire Date" />
                <label ng-show="showMessages && addJobForm.expiredate.$invalid" class="text-danger">
                    Expire Date is required.
                </label>
            </div>
        </div>
    </div>
</div>

CSS

.row {
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 10px;
    margin-bottom: 5px;
}

JavaScript

var demoApp = angular.module('demoApp', ["ui.bootstrap"]);

// create angular controller
demoApp.controller("demoController", ["$scope",
    function($scope) {
        var today = new Date();
        $scope.AvailableDate = new Date();
        $scope.ExpireDate = new Date();
        $scope.dateFormat = 'yyyy-MM-dd';
        $scope.availableDateOptions = {
            formatYear: 'yy',
            startingDay: 1,
            minDate: today,
            maxDate: new Date(2030, 5, 22)
        };
        $scope.expireDateOptions = {
            formatYear: 'yy',
            startingDay: 1,
            minDate: today,
            maxDate: new Date(2030, 5, 22)
        };
        $scope.availableDatePopup = {
            opened: false
        };
        $scope.expireDatePopup = {
            opened: false
        };
        $scope.ChangeExpiryMinDate = function(availableDate) {
            if (availableDate != null) {
                var expiryMinDate = new Date(availableDate);
                $scope.expireDateOptions.minDate = expiryMinDate;
                $scope.ExpireDate = expiryMinDate;
            }
        };
        $scope.ChangeExpiryMinDate();
        $scope.OpenAvailableDate = function() {
            $scope.availableDatePopup.opened = !$scope.availableDatePopup.opened;
        };
        $scope.OpenExpireDate = function() {
            $scope.expireDatePopup.opened = !$scope.expireDatePopup.opened;
        };
    }
]);