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

二、DatePicker Popup 回到datepicker

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相关推荐

JQuery 1.32 DatePicker 增强版
增加部分JS代码实现"清除"按钮 <script type="text/javascript"> $(function() { ...
jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？...
jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...
android中DatePicker和TimePicker的使用
先来看看效果图吧: 下面来贴出代码吧,其中main.xml代码为: <?xml version="1.0" encoding="utf-8"?> & ...
android datepicker使用方法,android DatePicker
Date Picker 提供了一个构件去选择一个时间,使用DatePicker构件,该构件允许用户去选择月,日,年在一个界面中. 实例介绍首先我们应该先创建一个DatePickerDialog,该D ...
android内置picker控件,android中控件DatePicker控件-Fun言
activity_main.xml android:id="@+id/dp" android:layout_width="match_parent" andro ...
datePicker在fullscreen下不弹出
1 open("about:blank",null,"fullscreen=yes"); 没有全屏可以弹出,但是全拼后不弹出? 后台按ESC发现,不是不弹出,而 ...
jquery 毫秒转换成日期_jQuery Datepicker – 如何将日期格式化为纪元时间戳(以秒为单位,而不是毫秒)...
我正在使用 jquery datepicker插件来设置一个日期字段,该字段存储为db中的纪元时间戳(字段,publish_time,直接映射到表模式). 看来Datepicker只支持以毫秒为单位的 ...
WPF 4.0 DatePicker 快速录入
WPF 4.0的DatePicker在通过键盘录入日期的时候是非常让人郁闷的.必须按照日期的格式来完整输入例如,比如输入"2010/10/10"才能识别.而实际上在一些要求快速录 ...
WPF DatePicker默认显示当前日期,格式化为年月日（转）
WPF DatePicker默认显示当前日期,格式化为年月日 2018年08月08日 11:23:00 weixin_33922670 阅读数:253 原文:WPF DatePicker默认显示当前日 ...
DatePicker的使用(一)
结合DatePickerDialog和TimePickerDialog package com.example.androidtest;import android.os.Bundle; import ...