允許用戶選擇僅使用Angularjs ui bootstrap的今天日期或將來的日期

Question

我正在使用ui bootstrap指令ui-datepicker。我想設置日期選擇器，用戶只能選擇今天的日期或將來的日期。這裏是日期選擇器的HTML：

<div class="input-group"> 
           <input type="text" class="form-control" 
             uib-datepicker-popup="yyyy-MM-dd" 
             name="start_date" 
             ng-model="loan.start_date" 
             is-open="popup1.opened" 
             datepicker-options="dateOptions" 
             ng-required="true" 
             close-text="Close" 
             alt-input-formats="altInputFormats" 
           /> 
          <span class="input-group-btn"> 
          <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 

以下是我對JavaScript的一面：

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

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

我怎麼能去這樣做實現這一點，在此先感謝。

Answer 1

您的JavaScript看起來不錯，但您的標記似乎有點偏離。看看這個plunker（從Angular原創修改），這是一個工作的例子。

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


    <p class="input-group"> 
      <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 
      <span class="input-group-btn"> 
      <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 
      </span> 
     </p>