日期選擇器值分配到一個下拉列表

Question

我正在開發我的應用程序，我想要做的是當我選擇日曆上的日期，選定的日期具體是月份，日期和年份將是下拉的值。每個例如一個月是一個下拉屬性接下來就是花葯下拉

這裏是我的選擇

代碼

<select ng-disabled="isCheckboxSelected('1')" ng-model="ngModel"> 
     <option ng-value=" {{ngModel | date: 'MM'}}" 
     </option> 
    </select> 

我的日期選擇器是

<input 
    type="date" 
    ng-disabled="isCheckboxSelected('1')" 
    id="test" 
    name="date" 
    ng-model="ngModel" 
    popup="d MMM yyyy" 
    options="dateOptions" 
    ng-click="Opened=true" 
    ng-change="saveNewDate" 
    custom-datepicker/> 

進出口使用AngularJS

Answer 1

通過在日曆控件上使用$ watch，您可以將日期值分配給下拉菜單。

以下是相同的基本版本。如果日期將被選擇一次，那麼你不需要在月份，日期和年份的數組。在這種情況下，一個簡單的變量就足夠用於值綁定。

function TodoCtrl($scope, $filter) { 
 
    $scope.month = []; 
 
    $scope.day = []; 
 
    $scope.year = []; 
 

 
    $scope.$watch('myDate', function(newValue) { 
 
     if (newValue != undefined) { 
 
      if ($scope.month.indexOf($filter('date')(newValue, 'MM')) == -1) { 
 
       $scope.month.push($filter('date')(newValue, 'MM')); 
 
      } 
 

 
      if ($scope.day.indexOf($filter('date')(newValue, 'dd')) == -1) { 
 
       $scope.day.push($filter('date')(newValue, 'dd')); 
 
      } 
 

 
      if ($scope.year.indexOf($filter('date')(newValue, 'yyyy')) == -1) { 
 
       $scope.year.push($filter('date')(newValue, 'yyyy')); 
 
      } 
 
     } 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
    <h2>Todo</h2> 
 

 
    <div ng-controller="TodoCtrl"> 
 
     <table width="70%"> 
 
      <tr> 
 
       <td>Calender :</td> 
 
       <td> 
 
        <input type="date" ng-disabled="isCheckboxSelected('1')" id="test" name="date" ng-model="myDate" popup="d MMM yyyy" options="dateOptions" ng-click="Opened=true" ng-change="saveNewDate" custom-datepicker/> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>Date :</td> 
 
       <td> 
 
        <select data-ng-model="daySelected" data-ng-options="c as c for c in day"> 
 
         <option value="">-- Select Day --</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>Month :</td> 
 
       <td> 
 
        <select data-ng-model="monthSelected" data-ng-options="c as c for c in month"> 
 
         <option value="">-- Select Month --</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td>Year :</td> 
 
       <td> 
 
        <select data-ng-model="yearSelected" data-ng-options="c as c for c in year"> 
 
         <option value="">-- Select Year --</option> 
 
        </select> 
 
       </td> 
 
      </tr> 
 
     </table> 
 

 
    </div> 
 
</div>

JSFiddle