如果日期小於當前日期，則禁用ui引導日期選擇器 - Angularjs ngRepeat

Question

如何在日期模型小於當前日期或日期「已過期」時禁用每個日期選擇器。

我正在開發一個用於開始和結束日期的帶有datepickers的UI。最初，取決於從後端返回的數據，UI可以根據需要具有儘可能多的日期選擇器。用戶還可以添加更多日期選擇器。

以下是我用於使用ngRepeat構建datepickers的示例數據。

 { 
      "id": 1234, 
      "seasons": [{ 
       "endDate": "2016-01-03", 
       "startDate": "2015-09-10", 
       "description": "2015" 
      }, { 
       "endDate": "2017-01-03", 
       "startDate": "2016-09-10", 
       "description": "2016" 
      }] 
     } 

我正在創建一個用戶界面，用戶只有在開始日期和結束日期未過期的情況下才可以通過datepickers更改日期。在日期已過期的情況下，需要禁用日期選擇器。

這裏是我的UI供參考。

我目前的做法是迭代季節數組，並檢查startDate是否小於今天。

 ss.datePickerStartDateEnabled = false; 

     angular.forEach(ss.seasonSet.seasons, function(season, key) { 
      if (season.startDate < today) { 
       console.log('Less than today'); 
       ss.datePickerStartDateEnabled = true; 
      } 
     }); 

到目前爲止它的工作原理，但它禁用不少於今天的startDate。

這裏是我的html

<div class="row" ng-repeat="s in ss.seasonSet.seasons track by $index"> 
    <div ng-controller="DatePickerCtrl as datePicker"> 
     <div class="col-md-3">      <!-- StartDate datepicker--> 
     <div class="form-group has-feedback"> 
      <label for="username">Start Date</label> 
      <input 
       type="text" 
       class="form-control" 
       id="startDate{{$index}}" <!-- id=startDate1 --> 
       uib-datepicker-popup="{{}}" 
       ng-model="s.startDate" 
       is-open="datePicker.isOpen.startDate" 
       datepicker-options="datePicker.dateOptions" 
       ng-required="true" 
       ng-disabled="ss.datePickerStartDateEnabled" 
       close-text="Close" 
       ng-click="datePicker.open($event, 'startDate')"/> 
      <span class="form-control-feedback glyphicon glyphicon-calendar"></span> 
     </div> 
     <div class="form-group has-feedback"> 
      <label for="username">End Date</label> 
      <input 
       type="text" 
       class="form-control" 
       id="endDate+{{$index}}" 
       uib-datepicker-popup="{{}}" 
       ng-model="s.endDate" 
       is-open="datePicker.isOpen.endDate" 
       datepicker-options="datePicker.dateOptions" 
       ng-required="true" 
       close-text="Close" 
       ng-click="datePicker.open($event, 'endDate')"/> 
      <span class="form-control-feedback glyphicon glyphicon-calendar"></span> 
     </div> 
     </div> 
    </div> 
</div> 

在我的控制器在日期選擇器輸入我怎樣使用id="endDate+{{$index}}"與ng-disabled="ss.datePickerStartDateEnabled"和ss.datePickerEndtDateEnabled沿基於從上面的條件來禁用一個日期選擇器。

還有其他需要我做的驗證，例如重複日期和開始日期必須在上一個結束日期之後。我試圖首先解決這個簡單的案例。

在此先感謝。這裏是猛擊code，這裏是UI，日期時間選擇器不起作用。看到它全屏更好的用戶界面。

Answer 1

在input上使用ng-disabled是正確的方法。

您的評論，

到目前爲止，它的工作原理，但它禁止的startDate即不小於今天。

使我認爲您的日期比較可能有缺陷，例如，如果他們比較不同的日期格式。在日期比較之後，通過ng-disabled禁用input應該是所有這一切。

您也有一些語義混淆 ng-disabled="ss.datePickerStartDateEnabled" 它基本上說「禁用，如果啓用」。

Answer 2

我能夠使用以下模式解決此問題。

如果日期已過期至我的DatePickerCtrl，我委派UI邏輯禁用日期選擇器。

angular.module('someApp') 
.controller('DatePickerCtrl', ['$filter', function($filter) { 

    var datePicker = this; 

    datePicker.dateOptions = { 
     formatYear: 'yy', 
     startingDay: 1, 
    }; 

    var today = $filter('date')(new Date(), "yyyy-MM-dd"); 

    datePicker.startDateDisable = startDateDisable; 
    datePicker.endDateDisable = endDateDisable; 
    datePicker.open = open; 

    //Useful to manage more than one datepicker in the same view 
    //E.g. datepickers created in a ngRepeat 
    datePicker.isOpen = {}; 

    function open($event, which) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 
     datePicker.isOpen[which] = true; 
    } 

    function startDateDisable(startDate) { 
     return startDate <= today ? true : false; 
    } 

    function endDateDisable(endDate) { 
     return endDate <= today ? true : false; 
    } 

    //Date format could come from user's profile preferences 
    datePicker.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 
    datePicker.format = datePicker.formats[2]; 
}]) 

的startDateDisable(startDate)和endDateDisable(endDate)功能相關的唯一因素。

接下來，我用ng-disabled指令的日期選擇器輸入這樣：

<div class="form-group has-feedback"> 
    <label for="username">Start Date</label> 
    <input 
     type="text" 
     class="form-control" 
     id="startDate{{$index}}" 
     uib-datepicker-popup="{{format}}" 
     ng-model="s.startDate" 
     is-open="datePicker.isOpen.startDate" 
     datepicker-options="datePicker.dateOptions" 
     ng-required="true" 
     ng-disabled="datePicker.startDateDisable(s.startDate)" 
     close-text="Close" 
     ng-click="datePicker.open($event, 'startDate')" 
     date-validation/> 
    <span class="form-control-feedback glyphicon glyphicon-calendar"></span> 
</div> 

相關的代碼是ng-disabled="datePicker.startDateDisable(s.startDate)"在我的輸入模型，其中s.startDate。 DatePickerCtrl負責管理UI狀態。數據來自另一個控制器。

相同的邏輯適用於endDate。