使用引導禁用日期datepicker

Question

我想禁用一些日期（最終通過我提供的數組）使用datepicker控件。但是，似乎沒有任何用處傳遞給dateDisabled函數。當我在開發人員工具中設置斷點時，第一個變量（在文檔示例中設置爲data）只是數字零。

我已經驗證了該選項本身的功能，因爲空白返回true會禁用所有日期。我必須做什麼才能獲得有效的投入？

注：我剛剛發現我們正在使用angular-ui-bootstrap版本0.12.1。

JS

//options object for the datepicker control 
    $scope.dateOptions = { 
     dateDisabled: disableDates, 
     formatYear: "yyyy" 
    }; 

    // Disable weekend selection 
    function disableDates(date, mode) { 
     //return mode === 'day' && (date.getDay() === 5 || date.getDay() === 6); 
     //return true; 
     return date === new Date(2016, 6, 18); 
    } 

    //Set the calendar open 
    $scope.openCalendar = function (e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     $scope.vm.is_cal_open = !$scope.vm.is_cal_open; 
    }; 

    $scope.hasInvalidErrorDate = function (date) { 
     if (!date || date <= Date.parse("1/1/1900")) { 
      return true; 
     } 

     return false; 
    }; 

    $scope.earliestErrorDate = Date.parse("1/1/1900"); 

HTML

<div class="col-sm-4"> 
    <!-- Error Date --> 
    <div class="form-group" ng-class="{'has-error': hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty}"> 
     <label for="error_date">Error Date</label> 
     <p class="input-group calendar-wrapper"> 
      <!--input disabled the input so that it forces users to use the date picker and therfore ensure good input--> 
      <input type="text" datepicker-popup="MM/dd/yyyy" 
        title="Click the calendar button" 
        name="error_date" 
        datepicker-options="dateOptions" 
        class="form-control" 
        is-open="vm.is_cal_open" 
        width="5" 
        ng-disabled="true" 
        ng-model="vm.data.adjustment.error_date" 
        min-date="dateOptions.minDate" /> 
      <span class="input-group-btn"> 
       <button type="button" class="btn btn-default delegate-cal-btn" ng-click="openCalendar($event)"><i class="fa fa-calendar"></i></button> 
      </span> 
     </p> 
     <span class="text-danger small" ng-show="hasInvalidErrorDate(vm.data.adjustment.error_date) && form.$dirty"> 
      Please select an error date 
     </span> 
    </div> 
</div> 

Answer 1

工作精絕。

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

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

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

         $scope.dateOptions = { 

          formatYear : 'yy', 
          maxDate : new Date(2199, 12, 31), 
          minDate : new Date(), 
          startingDay : 1 
         }; 

         $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.open2 = function() { $scope.popup2.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 
         }; 

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

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


         /* 
         * $scope.popup2 = { 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' 
         } ]; 

         function getDayClass(data) { 
          var date = data.date, mode = data.mode; 
          if (mode === 'day') { 
           var dayToCheck = new Date(date).setHours(0, 
             0, 0, 0); 

           for (var i = 0; i < $scope.events.length; i++) { 
            var currentDay = new Date(
              $scope.events[i].date) 
              .setHours(0, 0, 0, 0); 

            if (dayToCheck === currentDay) { 
             return $scope.events[i].status; 
            } 
           } 
          } 

          return ''; 
         }