AngularUI 日期選取器- 選取時間區間

最近在練習 Angular 跟 AngularUI ，其實手邊同時在進行新玩的東西好多..

有一個需求是使用 Angular 來做 DatePicker ，因為有一個結合 Bootstrap 的 AngularUI 有這個功能，於是就參考他的寫法改了一個可以選取時間區間的 UI。

首先設好 AngularUI 的環境，他方便的是都有 cdn 可以用，複製一下就可以在本機端直接實作了。

準備 html:

view plaincopy to clipboardprint

1. <div class="wrapper" ng-controller="Datepicker1" >  
2.     <div class="form-horizontal">  
3.         <p>  
4.             <input type="text" datepicker-popup="{{format}}" ng-change="toggleMin()" ng-model="dt" is-open="opened"  datepicker-options="dateOptions" max="maxDate" ng-required="true" close-text="Close" />  
5.         </p>  
6.         <p>  
7.             <input type="text" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2"  datepicker-options="dateOptions" ng-required="true" min="minDate" ng-change="toggleMax()"  close-text="Close" />  
8.         </p>  
9.     </div>  
10. </div>  

因為要選擇一個區間，所以除了兩個顯示選取時間的 input 欄位要各自的 model 外，我還各自放了 ng-change="toggleMin()", max="maxDate" 和 min="minDate" ng-change="toggleMax()" ，用以偵測在一邊改變後，是另一個欄位的最大(小)值。

view plaincopy to clipboardprint

1. angular.module('plunker', ['ui.bootstrap']);   
2. var Datepicker1 = function ($scope, $timeout) {   
3.   $scope.today = function() {   
4.     $scope.dt = new Date();   
5.     $scope.dt2 = new Date();   
6.   };   
7.   $scope.today();   
8.   
9.   $scope.toggleMin = function() {   
10.     $scope.minDate = $scope.dt;    
11.   };   
12.   $scope.toggleMin();   
13.   $scope.toggleMax = function() {   
14.     $scope.maxDate = $scope.dt2;   
15.   };   
16.   $scope.toggleMax();   
17.   
18.   $scope.open = function() {   
19.     $timeout(function() {   
20.       $scope.opened = true;   
21.     });   
22.   };   
23.   $scope.open2 = function() {   
24.     $timeout(function() {   
25.       $scope.opened2 = true;   
26.     });   
27.   };   
28.   
29.   $scope.dateOptions = {   
30.     'year-format': "'yy'"  
31.   };   
32.   
33.   $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];   
34.   $scope.format = $scope.formats[0];   
35. };  

Demo