2013年11月28日 星期四

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

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

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

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

準備 html:
  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()" ,用以偵測在一邊改變後,是另一個欄位的最大(小)值。

  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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...