Deaktivieren von Daten mit Bootstrap datepicker

Question

Ich versuche, einige Daten (eventuell über ein Array, das ich zur Verfügung stelle) mit dem datepicker Steuerelement zu deaktivieren. Es scheint jedoch, dass nichts Nützliches an die dateDisabled Funktion weitergegeben wird. Wenn ich einen Haltepunkt in den Entwicklertools festlege, erscheint die erste Variable (die in den Dokumentationsbeispielen auf data gesetzt ist) einfach als die Zahl Null.

Ich habe überprüft, dass die Option selbst funktioniert, wie eine leere true deaktiviert alle Daten deaktiviert. Was muss ich tun, um gültige Eingaben zu erhalten?

Hinweis: Ich habe gerade festgestellt, dass wir eckige-ui-Bootstrap-Version 0.12.1 verwenden.

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

Arbeiten absolut in Ordnung.

$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 ''; 
         }