AngularJs的UI组件ui-Bootstrap——Datepicker Popup
生活随笔
收集整理的這篇文章主要介紹了
AngularJs的UI组件ui-Bootstrap——Datepicker Popup
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Datepicker Popup是用來選擇日期的控件，一般和文本框一起使用，功能和Jquery的插件My97DatePicker一樣。在Datepicker Popup內部使用了ui-bootstrap的另一個組件Datepicker，是Datepicker的擴展。
使用Datepicker Popup前，一定要引用angular-locale_zh-cn.js這個腳本，否則顯示出來的月份和星期就是英文了。
先來看一個最簡單的用法：
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這個日期為例，格式化文本和格式化后的值是：
| 格式化文本 | 值 | 備注 |
| 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元素中可以單獨為這個面板設置樣式）
對于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控件，那就沒有意義了。
因為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自定義禁選范圍的例子：
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> View Code
注意禁選日期的顯示和自定義類的顯示。
?
在打開日期面板時，可以使用鍵盤來選擇日期，上下左右和PgUp，PgDn，Home，End，Ctrl+Up，Ctrl+Down選擇范圍，空格或者回車選擇日期，Esc退出面板。
總結
以上是生活随笔為你收集整理的AngularJs的UI组件ui-Bootstrap——Datepicker Popup的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 软件测试基础——概念篇
- 下一篇： 宝塔一键安装部署tipask登录出现错误