AngularJs的UI組件ui-Bootstrap分享（四）——Datepicker Popup

時間 2019-11-25

標籤 angularjs 組件 bootstrap 分享 datepicker popup 欄目 AngularJS 简体版

原文原文鏈接

Datepicker Popup是用來選擇日期的控件，通常和文本框一塊兒使用，功能和Jquery的插件My97DatePicker同樣。在Datepicker Popup內部使用了ui-bootstrap的另外一個組件Datepicker，是Datepicker的擴展。css

使用Datepicker Popup前，必定要引用angular-locale_zh-cn.js這個腳本，不然顯示出來的月份和星期就是英文了。html

先來看一個最簡單的用法：json

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="/Content/bootstrap.css" rel="stylesheet" />
 7     <script src="/Scripts/angular.js"></script>
 8     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
 9     <script src="/Scripts/angular-locale_zh-cn.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DatepickerPopupDemoCtrl', function ($scope) { 12  $scope.dat = new Date(); 13  $scope.format = "yyyy/MM/dd"; 14  $scope.altInputFormats = ['yyyy/M!/d!']; 15 
16  $scope.popup1 = { 17  opened: false
18  }; 19  $scope.open1 = function () { 20  $scope.popup1.opened = true; 21  }; 22  }); 23     </script>
24 </head>
25 <body>
26     <div ng-controller="DatepickerPopupDemoCtrl">
27         <p class="form-group">
28             <div class="input-group">
29                 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="關閉"
30  clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" />
31                 <span class="input-group-btn">
32                     <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
33                 </span>
34             </div>
35         </p>
36     </div>
37 </body>
38 </html>

View Code

其中最關鍵是這個：uib-datepicker-popup="{{format}}"，uib-datepicker-popup支持多種格式化方式，以2016-6-23 17:35:08這個日期爲例，格式化文本和格式化後的值是：bootstrap

格式化文本	值	備註
yyyy	2016	4位數年份
yy	16	2位數年份
y	2016	1到4位數年份
MMMM	六月
MMM	6月
MM	06	2位數月份
M	6	1位數月份
M!	06	1位或2位數月份
dd	23	2位很多天期
d	23	1位很多天期
d!	23	1位數或2位很多天期
EEEE	星期四
EEE	週四
HH	17	24小時制小時
H	17
hh	05	12小時制小時
h	5
mm	35	分鐘
m	35
sss	196	毫秒
ss	08	秒
s	8
a	下午	上午或下午
Z	+0800	時區
ww	25	當年的第幾周
w	25
G,GG,GGG,GGGG	公元	公元或公元前
fullDate	2016年6月23日星期四
longDate	2016年6月23日
medium	2016年6月23日下午5:35:08
mediumDate	2016年6月23日
mediumTime	下午5:35:08
short	16/6/23 下午5:35
shortDate	16/6/23
shortTime	下午5:35

uib-datepicker-popup控件可使用的屬性有：瀏覽器

屬性	默認值	備註
alt-input-formats	[]	手動輸入日期時可接受的格式
clear-text	clear	清空按鈕的文本
close-on-date-selection	true	選擇一個日期後是否關閉日期面板
close-text	close	關閉按鈕的文本
current-text	today	今天按鈕的文本
datepicker-append-to-body	false	是否將日期面板放在body元素中
datepicker-options		對Datepicker控件的配置
datepicker-popup-template-url	uib/template/datepickerPopup/popup.html
is-open	false	是否顯示日期面板
on-open-focus	true	打開日期面板時是否獲取焦點
show-button-bar	true	是否在日期面板下方顯示」今天」,」關閉」等按鈕
type	text	能夠改成date\|datetime-local\|month，這樣會改變日期面板的日期格式化。
popup-placement	auto bottom-left	在位置前加一個auto,表示日期面板會定位在它最近一個能夠滾動的父元素中.能夠設置的位置有:top top-left top-right bottom bottom-left bottom-right left left-top left-bottom right right-top right-bottom
uib-datepicker-popup	yyyy-MM-dd	顯示日期的格式。可以使用的格式見上面的列表。

對於datepicker-append-to-body屬性，值爲false時彈出面板的html會緊跟在input元素的後面，值爲true時面板html會放在body元素中。若是要對面板的樣式作特殊調整時，使用這個屬性會比較方便（由於緊跟在input元素後面會繼承父元素的樣式，放在body元素中能夠單獨爲這個面板設置樣式）app

對於type屬性，我的感受彷佛沒有什麼用，由於在input元素上使用uib-datepicker-popup="{{format}}"時，改變type的值爲date或datetime-local或month其實是會報錯的：「HTML5 date input types do not support custom formats」，在不使用uib-datepicker-popup="{{format}}"時，改變日期面板格式化是使用瀏覽器實現的HTML5日期格式化功能，至關於不使用uib-datepicker-popup控件，那就沒有意義了。ide

由於uib-datepicker-popup擴展了Datepicker控件，因此uib-datepicker-popup可使用Datepicker的配置，也就是datepicker-options，這是一個Json對象，能夠設置的項有：函數

鍵	默認值	備註
customClass		一個可選的函數，設置日期面板中每一個日期的樣式。傳入參數爲一個json對象{date: obj1, mode: obj2}，返回值爲類的名字
dateDisabled		一個可選的函數，設置日期面板中每一個日期是否可選。傳入參數爲一個json對象{date: obj1, mode: obj2}，返回值爲bool類型
datepickerMode	day	可設置爲day,month,year。表示控件的選擇模式
formatDay	dd	天數的格式化形式
formatMonth	MMMM	月份的格式化形式
formatYear	yyyy	年份的格式化形式
formatDayHeader	EEE	星期的格式化形式
formatDayTitle	MMMM yyyy	按天數選擇日期時，面板中當前月份和年份的格式化形式（顯示爲：六月 2016 的地方）
formatMonthTitle	yyyy	按月份選擇日期時，面板中當前年份的格式化形式
initDate	null	初始化日期
maxDate	null	可選擇的最大日期（必須是Javascript日期類型）
maxMode	year	可選擇的最大日期模式
minDate	null	可選擇的最小日期（必須是Javascript日期類型）
minMode	day	可選擇的最小日期模式
shortcutPropagation	false	是否禁用鍵盤事件傳播
showWeeks	true	是否顯示面板中的日期是當年的第幾周
startingDay	$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK	一個星期從周幾開始。可設置爲0到6的數字，0表示週日，6表示週六
yearRows	4	選擇年份時顯示多少行
yearColumns	5	選擇年份時顯示多少列

這是一個使用customClass自定義樣式和dateDisabled自定義禁選範圍的例子：ui

 1 <!DOCTYPE html>
 2 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <link href="/Content/bootstrap.css" rel="stylesheet" />
 7     <script src="/Scripts/angular.js"></script>
 8     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
 9     <script src="/Scripts/angular-locale_zh-cn.js"></script>
10     <script>
11  angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DatepickerPopupDemoCtrl', function ($scope) { 12  $scope.dat = new Date(); 13  $scope.format = "yyyy/MM/dd"; 14  $scope.altInputFormats = ['yyyy/M!/d!']; 15 
16  $scope.popup1 = { 17  opened: false
18  }; 19  $scope.open1 = function () { 20  $scope.popup1.opened = true; 21  }; 22  $scope.dateOptions = { 23  customClass: getDayClass,//自定義類名
24  dateDisabled: isDisabled//是否禁用
25  } 26 
27 
28             var tomorrow = new Date(); 29  tomorrow.setDate(tomorrow.getDate() + 1); 30             var afterTomorrow = new Date(); 31  afterTomorrow.setDate(tomorrow.getDate() + 1); 32  $scope.events = [ 33  { 34  date: tomorrow, 35  status: 'full'
36  }, 37  { 38  date: afterTomorrow, 39  status: 'partially'
40  } 41  ]; 42             //爲日期面板中的每一個日期（默認42個）返回類名。傳入參數爲{date: obj1, mode: obj2}
43             function getDayClass(obj) { 44                 var date = obj.date, 45  mode = obj.mode; 46                 if (mode === 'day') { 47                     var dayToCheck = new Date(date).setHours(0, 0, 0, 0); 48 
49                     for (var i = 0; i < $scope.events.length; i++) { 50                         var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0); 51 
52                         if (dayToCheck === currentDay) { 53                             return $scope.events[i].status; 54  } 55  } 56  } 57                 return ''; 58  } 59             //設置日期面板中的全部週六和週日不可選
60             function isDisabled(obj) { 61                 var date = obj.date, 62  mode = obj.mode; 63                 return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 64  } 65  }); 66     </script>
67     <style>
68  .full button span {
69  background-color: limegreen;
70  border-radius: 32px;
71  color: black;
72         }
73 
74  .partially button span {
75  background-color: orange;
76  border-radius: 32px;
77  color: black;
78         }
79     </style>
80 </head>
81 <body>
82     <div ng-controller="DatepickerPopupDemoCtrl">
83         <p class="form-group">
84             <div class="input-group">
85                 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="關閉"
86  clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" datepicker-options="dateOptions" />
87                 <span class="input-group-btn">
88                     <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
89                 </span>
90             </div>
91         </p>
92     </div>
93 </body>
94 </html>