disable all dates on load of calendar and enable specific dates in angularjs (only datePicker and not dateTimePicker)
<p>siteDatePicker.html:</p>

<pre><code>        &lt;html&gt;
          &lt;head&gt;
            &lt;title&gt;Typehead&lt;/title&gt;
            &lt;meta charset="UTF-8"&gt;
            &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
            &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;
            &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.js"&gt;&lt;/script&gt;
            &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular-animate.js"&gt;&lt;/script&gt;
            &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
          &lt;script src="./siteDatePicker.js"&gt;&lt;/script&gt;

              &lt;style&gt;
              .full button span {
                background-color: limegreen;
                border-radius: 32px;
                color: black;
              }
              .partially button span {
                background-color: orange;
                border-radius: 32px;
                color: black;
              }
              .appointment&gt;button {
                color: white;
                background-color: red;
              }

            &lt;/style&gt;   

          &lt;/head&gt;
          &lt;body ng-app="ui.bootstrap.demo" &gt;

             &lt;div ng-controller="DatepickerDemoCtrl"&gt;
              &lt;pre&gt;Selected date is: &lt;em&gt;{{dt | date:'fullDate' }}&lt;/em&gt;&lt;/pre&gt;

              &lt;h4&gt;Popup&lt;/h4&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-6"&gt;
                  &lt;p class="input-group"&gt;
                    &lt;input type="text" class="form-control"  uib-datepicker-popup="{{format}}" ng-model="dt" ng-change="dateSelected()"is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" date-disabled="disabled(date, mode)" custom-class="dayClass(date, mode)" /&gt;
                    &lt;span class="input-group-btn"&gt;
                      &lt;button type="button" class="btn btn-default" ng-click="open1()"&gt;&lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;&lt;/button&gt;
                    &lt;/span&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/body&gt;
        &lt;/html&gt;
</code></pre>

<p>siteDatePicker.js:</p>

<pre><code>        var myApp= angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap', 'ui.bootstrap.dateparser', 'ui.bootstrap.datepicker']);



                     myApp.controller('DatepickerDemoCtrl', function($scope, $http) {


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

                      $scope.clear = function() {
                        $scope.dt = null;
                      };

                      $scope.inlineOptions = {
                        minDate: new Date(),
                        showWeeks: false
                      };

                      $scope.dateOptions = {
                          formatYear: 'yy',
                          maxDate: new Date(2020, 5, 22),
                          minDate: new Date(),
                          startingDay: 1
                        };

                        // Disable weekend selection
                        function disabledasda(data) {
                          var date = data.date,
                            mode = data.mode;
                          return mode === 'day' &amp;&amp; (date.getDay() === 0 || date.getDay() === 6);
                        }

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

                      $scope.toggleMin();

                      $scope.open1 = function() {
                        $scope.popup1.opened = true;
                      };


                      $scope.setDate = function(year, month, day) {
                        $scope.dt = new Date(year, month, day);
                      };

                      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
                      $scope.format = $scope.formats[0];
                      $scope.altInputFormats = ['M!/d!/yyyy'];

                      $scope.popup1 = {
                        opened: false
                      };


                      var tomorrow = new Date();
                      tomorrow.setDate(tomorrow.getDate() + 1);
                      var afterTomorrow = new Date();
                      afterTomorrow.setDate(tomorrow.getDate() + 1);
                      $scope.events = [
                        {
                          date: tomorrow,
                          status: 'full'
                        },
                        {
                          date: afterTomorrow,
                          status: 'partially'
                        }
                      ];
                      $scope.disabled = function(date, mode){

                        $scope.holidays = [
                          new Date(2016,2,14),
                          new Date(2016,2,15),
                          new Date(2016,2,16),
                        ]

                        var isHoliday = false;
                        for(var i = 0; i &lt; $scope.holidays.length ; i++) {
                          if(areDatesEqual($scope.holidays[i], date)){
                            isHoliday = true;
                          }
                        }

                        return ( mode === 'day' &amp;&amp; isHoliday );
                      };

                      function areDatesEqual(date1, date2) {

                        return date1.setHours(0,0,0,0) === date2.setHours(0,0,0,0)

                      }

                      $scope.dayClass = function(date, mode) {

                    var appointments = [
                      new Date(2016,2,3),
                      new Date(2016,2,8),
                      new Date(2016,2,22),
                    ]

                    if (mode === 'day') {

                      var dateToCheck = new Date(date);

                      for(var i = 0; i &lt; appointments.length ; i++) {
                        if(areDatesEqual(appointments[i], dateToCheck)){
                          return 'appointment';
                        }
                      }
                    }
                    return '';
                  };

                  $scope.dateSelected = function(){

            var appointments = [
              new Date(2016,2,3),
              new Date(2016,2,8),
              new Date(2016,2,22),
            ];

            var dateSelected = new Date($scope.dt);

            for(var i = 0; i &lt; appointments.length ; i++) {
              if(areDatesEqual(appointments[i], dateSelected)){
                performAction();
              }
            }

          };

          function performAction(){
            alert("Appointment date selected");
             $scope.holidays.push(new Date(2016,2,14));

                        $scope.disabled(date,mode);
          }



                     });
</code></pre>

<p>above is what i tried...i tried pushing new dates in in holidays array where dates are disabled...its done in the performaction function.....</p>

<p>firstly i want to load the calendar with all dates disabled at first and than i have to be able to enabled specific dates of my choice....</p>

<p>secondly after tha calendar has loaded and the specific dates have been enabled, i want to enable more dates on click of any of the enabled dates.</p>

<p>example:
all dates are disabled when calendar is loaded
27-03-2016 is enabled when calendar is loaded
on click of 27-03-2016, it enables 28-03-2016</p>

<p>please note: i want to disables ALL DATES and not to disable datepicker.</p>

<p>any help would be appreciated!</p>