Set Bootstrap calendar value based on another selection in AngularJS

Last Reply 6 days ago By dharmendr

Posted 6 days ago

Hi,

Display by default next month value based upon from date value

I have 2 dates

In 2nd datecontrol by default display nextmonth value based upon 1st date control

my expected o/p's

1)From:4-3-2020

To:  4-4-2020

2)From:30-5-2019

To:30-06-2020

Set previous Saturday based on current (today) Date in Bootstrap DatePicker 1.3.0 in AngularJS

Could you please help me

You are viewing reply posted by: dharmendr 6 days ago.
Posted 6 days ago

Hi mahesh213,

Refer below code.

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;

                    var todayHighlight = !attrs.todayHighlight ? false : true;

                    ngModel.$render = function () {
                        element.datepicker('update', ngModel.$viewValue || '');
                    };

                    element.datepicker({
                        format: 'dd/mm/yyyy',
                        todayHighlight: todayHighlight
                    }).on("changeDate", function (event) {
                        scope.$apply(function () {
                            ngModel.$setViewValue(event.date);
                        });
                    });
                }
            };
        });
        app.controller('MyController', function ($scope) {
            var today = new Date();
            var from = today.getDate() + "/" + (today.getMonth() + 1) + "/" + today.getFullYear();
            $scope.fromDate = from;
            $scope.SetToDate = function () {
                var from = new Date($scope.fromDate.split('/').reverse().join('/'))
                var to = from.getDate() + "/" + (from.getMonth() + 2) + "/" + from.getFullYear();
                $scope.toDate = to;
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    From : <input datepicker ng-model="fromDate" ng-change="SetToDate()" />
    To : <input datepicker ng-model="toDate" />
</body>
</html>

Demo