本文翻译自官网： https://angular-ui.github.io/bootstrap
目录：
一、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 });
扫一扫
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
