CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangular-ui-bootstrap
ngplayground
ngplayground

Reputation: 21627

AngularUI Bootstrap Datepicker Setting a minimum date

I am running the latest AngularUI Bootstrap and I have a Datepicker which gets enabled when it is clicked open by a button.

I've tried and searched to get the answer of how to disable dates being clicked, I'd like a minimum date of 1st January 2013 - meaning 31st December 2012 and older will not be selectable.

Below is my code

ANGULARJS

                    $scope.today = function() {
                        $scope.dt = new Date();
                    };
                    $scope.today();

                    $scope.clear = function () {
                        $scope.dt = null;
                    };
                    // Disable weekend selection
                    $scope.disabled = function(date, mode) {
                        //return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
                    };

                    $scope.toggleMin = function() {
                        $scope.minDate = $scope.minDate ? null : new Date();
                    };
                    //$scope.toggleMin();

                    $scope.open = function() {
                        $timeout(function() {
                            $scope.opened = true;
                            $scope.minEndDate = '2013-01-01';
                        });
                    };


                    $scope.dateOptions = {
                        formatYear: 'yy',
                        startingDay: 1
                    };
                    $scope.initDate = new Date('2016-15-20');
                    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                    $scope.format = $scope.formats[0];

HTML

<input type="text" class="form-control input--text" datepicker-popup="{{format}}" ng-model="newperson.dob" is-open="$parent.opened" min="minEndDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                    <button type="button" class="datepicker-btn" ng-click="open()"><i class="fa fa-calendar"></i></button>

Upvotes: 0

Views: 181

Answers (1)

acg
acg

Reputation: 961

The attribute is min-date you had just min there:

<input type="text" class="form-control input--text" datepicker-popup="{{format}}" ng-model="newperson.dob" is-open="$parent.opened" min-date="minEndDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                    <button type="button" class="datepicker-btn" ng-click="open()"><i class="fa fa-calendar"></i></button>

Upvotes: 0

Related Questions