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 <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="DatepickerDemoCtrl">
14     <pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
15 
16     <h4>Inline</h4>
17     <div style="display:inline-block; min-height:290px;">
18       <uib-datepicker ng-model="dt" class="well well-sm" datepicker-options="options"></uib-datepicker>// ng-model绑定了dt，相关的设置用options 设置
19     </div>
20 
21     <hr />
22     <button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
23     <button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
24     <button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
25     <button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
26 </div>

 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 });