當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Datepicker

發布時間：2023/12/2 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 Datepicker 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本文翻譯自官網： https://angular-ui.github.io/bootstrap

1. DatePicker

2. DatePicker popup

一、DatePicker?

https://angular-ui.github.io/bootstrap/#/datepicker

1. 三種模式

Datepicker是靈活，完全可定制的。它有3種模式：

1. day：在這種模式下可以看到某個月的6個周的分布情況

2. month: 在這種模式下可以選擇某年的某個月份

3. year: 在這種模式下可以選擇年份

2.參數設置

1) ng-model:日期對象。必須是JS的Date對象，可以利用uibDateParser服務來轉換

string-to-object

2) ng-model-options:默認為{}

3) template-url:默認為?uib/template/datepicker/datepicker.html，可以在此修改樣式

配置uib-datepicker除了設置以上3點，還需要創建一個JS 對象，設置它的 datepicker-options:

datepicker-options:

1) custom-class({date:date,mode:mode}):一個可選的表達式，以添加基于日期和當前模式屬性的對象的類

2) dateDisabled({date:date,mode:mode}):一個可選的表達式，用于選擇當前模式下哪些日期不可選。如示例中，disabled函數設置周末不可選。

3) datepickerMode:默認是day, 初始化Datepicker模式（天|月|年）。

4) formatDay: 默認是dd，日的格式

5) formatMonth: 默認是MMMM, 月的格式

6) formatYear:默認是YYYY，年的格式

7) formatDayHeader: 默認是EEE，周的格式

8) formatDayTitle: 默認是MMMM YYYY

9) formatMonthTitle: 默認是yyyy

10) initDate: 默認是null，沒有指定模型值時的初始視圖

11) maxDate: 默認為null，定義最大的可選日期，必須是JS Date對象

12) maxMode: 默認是year，設置模式上限

13) minDate: 默認是null，定義最小的可選日期，必須是JS Date對象

14) minMode: 默認是day，設置模式下限

15) shortcutPropagation: 默認是false，選擇是否禁用keydown的冒泡事件

16) showWeeks: 默認是true，是否顯示周號

17) startingDay: 默認是$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK，日期中一周的第一天定義為哪天，可選0-6；0表示周日，6表示周六

18) yearRows: 默認4，顯示年時，顯示幾行

19) yearColumns: 默認5，選擇年時，顯示幾列

1 angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
　　　//設置當前日期，將dt設置為當前日期 2 $scope.today = function() { 3 $scope.dt = new Date(); 4 }; 5 $scope.today(); 6
　　　//清除選中的日期，將dt設置為null 7 $scope.clear = function() { 8 $scope.dt = null; 9 }; 10
　　 //設置datepicker-options 11 $scope.options = { 12 customClass: getDayClass, // 添加當前日期和當前模式 13 minDate: new Date(), // 最小的可選日期 14 showWeeks: true // 顯示周號 15 }; 16 17 // 設置周末不可選，使用時在options中添加屬性：dateDsiabled:disabled 18 function disabled(data) { 19 var date = data.date, 20 mode = data.mode; 21 return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 22 } 23
　　 // 用于演示最小日期設置為日期對象或者null時的情況，如果在options設置了最小日期，則將其置為null，使得沒有最小可選日期。如果沒有設置最小可選日期，則將最小可選日期設置為現在的日期 24 $scope.toggleMin = function() { 25 $scope.options.minDate = $scope.options.minDate ? null : new Date(); 26 }; 27 28 $scope.toggleMin(); 29
　　 // 設置日期 30 $scope.setDate = function(year, month, day) { 31 $scope.dt = new Date(year, month, day); 32 }; 33
　　 // 設置明天，后天，返回日期對象 34 var tomorrow = new Date(); 35 tomorrow.setDate(tomorrow.getDate() + 1); 36 var afterTomorrow = new Date(tomorrow); 37 afterTomorrow.setDate(tomorrow.getDate() + 1);
38 $scope.events = [ 39 { 40 date: tomorrow, 41 status: 'full' 42 }, 43 { 44 date: afterTomorrow, 45 status: 'partially' 46 } 47 ]; 48 49 function getDayClass(data) { 50 var date = data.date, 51 mode = data.mode; 52 if (mode === 'day') { 53 var dayToCheck = new Date(date).setHours(0,0,0,0); 54 55 for (var i = 0; i < $scope.events.length; i++) { 56 var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); 57 58 if (dayToCheck === currentDay) { 59 return $scope.events[i].status; 60 } 61 } 62 } 63 64 return ''; 65 } 66 });

https://angular-ui.github.io/bootstrap/#/datepickerPopup

?DatePicker Popup是配合輸入框使用的，利用輸入框可以折疊和展開datepicker。配置datepicker可以使用datepicker-options 進行設置。

DatePicker Popup參數設置：

1) alt-input-formats: 默認為[], 可以接受手動輸入的格式列表。

2) clear-text: 默認Clear，clear 按鈕上顯示的文字。

3) close-on-date-selection: 默認true，當選中日期時是否關閉calendar。

4) close-text: 默認Done，close 按鈕上顯示的文字。

5) current-text: 默認Today, current day按鈕上的顯示文字

6) datepicker-append-to-body: 默認false, 配置appendToBody, 把datepicker popup元素追加到body元素，而不是插入到datepicker popup

7) datepicker-options:是一個對象,任意結合datepicker的參數來設置datepicker warpper

8) datepicker-popup-template-url: 默認uib/template/datepickerPopup/popup.html 可以重寫樣式布局

9) datepicker-template-url: 默認uib/template/datepicker/datepicker.html

10) is-open: 默認false, 是否顯示datepicker

11) ng-model: 同datepicker的ng-model

12) on-open-focus: 默認true，datepicker打開時，是否將將焦點設置在上面

13) show-button-bar: 默認true，是否在uib-datepicker下顯示按鈕工具欄,值得是datepicker下方的today clear close按鈕

14) type:默認text，配置html5Types，可以重寫輸入類型為date|datetime-local|month,這將改變彈出的日期格式

15) popup-placement: 默認auto bottom-left,配置placement，通過設置auto 空格 placement可以實現位置自動控制，如:auto bottom-left 彈出框將出現在最合適的地方，此外還可以接受很多位置參數，詳情參考原文

16) ui-datepicker-popup: 默認yyyy-mm-dd,配置datepickerConfig, 顯示日期的格式，這個字符串可以用單引號來包圍字符字面量，比如：yyyy-mm-dd h 'o\'clock

1 <style> 2 .full button span { 3 background-color: limegreen; 4 border-radius: 32px; 5 color: black; 6 } 7 .partially button span { 8 background-color: orange; 9 border-radius: 32px; 10 color: black; 11 } 12 </style> 13 <div ng-controller="DatepickerPopupDemoCtrl"> 14 <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre> 15 16 <h4>Popup</h4> 17 <div class="row"> 18 <div class="col-md-6"> 19 <p class="input-group"> 20 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" /> 21 <span class="input-group-btn"> 22 <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button> 23 </span> 24 </p> 25 </div> 26 27 <div class="col-md-6"> 28 <p class="input-group"> 29 <input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" /> 30 <span class="input-group-btn"> 31 <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button> 32 </span> 33 </p> 34 </div> 35 </div> 36 <div class="row"> 37 <div class="col-md-6"> 38 <label>Format: <span class="muted-text">(manual alternate <em>{{altInputFormats[0]}}</em>)</span></label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select> 39 </div> 40 </div> 41 42 <hr /> 43 <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button> 44 <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button> 45 <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button> 46 <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button> 47 </div>

1 angular.module('ui.bootstrap.demo').controller('DatepickerPopupDemoCtrl', function ($scope) {
　　　// 設置今天 2 $scope.today = function() { 3 $scope.dt = new Date(); 4 }; 5 $scope.today(); 6
　　 // 設置清除 7 $scope.clear = function() { 8 $scope.dt = null; 9 }; 10
　　 11 $scope.inlineOptions = { 12 customClass: getDayClass, 13 minDate: new Date(), 14 showWeeks: true 15 }; 16
　　　// 設置options參數 17 $scope.dateOptions = { 18 dateDisabled: disabled, // 設置不可選日期 19 formatYear: 'yy', 20 maxDate: new Date(2020, 5, 22), 21 minDate: new Date(), 22 startingDay: 1 // 起始日期為周一 23 }; 24 25 // 設置周末為不可選日期 26 function disabled(data) { 27 var date = data.date, 28 mode = data.mode; 29 return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 30 } 31 32 $scope.toggleMin = function() { 33 $scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date(); 34 $scope.dateOptions.minDate = $scope.inlineOptions.minDate; 35 }; 36 37 $scope.toggleMin(); 38
　　 // 點擊輸入框旁邊的日歷按鈕打開datepicker 39 $scope.open1 = function() { 40 $scope.popup1.opened = true; 41 }; 42 43 $scope.open2 = function() { 44 $scope.popup2.opened = true; 45 }; 46
　　 // 設置日期 47 $scope.setDate = function(year, month, day) { 48 $scope.dt = new Date(year, month, day); 49 }; 50
　　 // 設置格式列表中的選項，以及初始化格式 51 $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate']; 52 $scope.format = $scope.formats[0]; 53 $scope.altInputFormats = ['M!/d!/yyyy']; 54
　　 // 設置pickdate打開狀態，true為打開，false為隱藏 55 $scope.popup1 = { 56 opened: false 57 }; 58 59 $scope.popup2 = { 60 opened: false 61 }; 62
　　 // 設置明天和后天的日期 63 var tomorrow = new Date(); 64 tomorrow.setDate(tomorrow.getDate() + 1); 65 var afterTomorrow = new Date(); 66 afterTomorrow.setDate(tomorrow.getDate() + 1); 67 $scope.events = [ 68 { 69 date: tomorrow, 70 status: 'full' 71 }, 72 { 73 date: afterTomorrow, 74 status: 'partially' 75 } 76 ]; 77 78 function getDayClass(data) { 79 var date = data.date, 80 mode = data.mode; 81 if (mode === 'day') { 82 var dayToCheck = new Date(date).setHours(0,0,0,0); 83 84 for (var i = 0; i < $scope.events.length; i++) { 85 var currentDay = new Date($scope.events[i].date).setHours(0,0,0,0); 86 87 if (dayToCheck === currentDay) { 88 return $scope.events[i].status; 89 } 90 } 91 } 92 93 return ''; 94 } 95 });

回到頂部

轉載于:https://www.cnblogs.com/YangqinCao/p/5666201.html

總結

以上是生活随笔為你收集整理的Datepicker的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Datepicker

上一篇：在Eclipse中配置Tomcat7.0
下一篇： DELPHI跨平台的临界替代者