@H_404_1@Datepicker Popup是用来选择日期的控件，一般和文本框一起使用，功能和Jquery的插件My97DatePicker一样。在Datepicker Popup内部使用了ui-bootstrap的另一个组件Datepicker，是Datepicker的扩展。
@H_404_1@使用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 @H_403_46@head 4 @H_403_46@Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 @H_403_46@title></ 6 @H_403_46@link href="/Content/bootstrap.css" rel="stylesheet" 7 @H_403_46@script src="/Scripts/angular.js"@H_403_46@script 8 ="/Scripts/ui-bootstrap-tpls-1.3.2.js" 9 ="/Scripts/angular-locale_zh-cn.js"10 11 angular.module('ui.bootstrap.demo,[ui.bootstrap]).controller(DatepickerPopupDemoCtrlfunction ($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 () { 20 $scope.popup1.opened true21 22 }); 23 </24 25 @H_403_46@body26 @H_403_46@div ng-controller="DatepickerPopupDemoCtrl"27 @H_403_46@p class="form-group"28 ="input-group"29 @H_403_46@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 @H_403_46@span ="input-group-btn"32 @H_403_46@button ="button"="btn btn-default" ng-click="open1()"><i ="glyphicon glyphicon-calendar"@H_403_46@i@H_403_46@button33 @H_403_46@span34 @H_403_46@div35 @H_403_46@p36 37 38 @H_403_46@html>
@H_404_1@
@H_404_1@其中最关键是这个：uib-datepicker-popup="{{format}}"，uib-datepicker-popup支持多种格式化方式，以2016-6-23 17:35:08这个日期为例，格式化文本和格式化后的值是：
| @H_404_1@格式化文本 | @H_404_1@值 | @H_404_1@备注 |
| @H_404_1@yyyy | @H_404_1@2016 | @H_404_1@4位数年份 |
| @H_404_1@yy | @H_404_1@16 | @H_404_1@2位数年份 |
| @H_404_1@y | @H_404_1@2016 | @H_404_1@1到4位数年份 |
| @H_404_1@MMMM | @H_404_1@六月 | @H_404_1@ |
| @H_404_1@MMM | @H_404_1@6月 | @H_404_1@ |
| @H_404_1@MM | @H_404_1@06 | @H_404_1@2位数月份 |
| @H_404_1@M | @H_404_1@6 | @H_404_1@1位数月份 |
| @H_404_1@M! | @H_404_1@06 | @H_404_1@1位或2位数月份 |
| @H_404_1@dd | @H_404_1@23 | @H_404_1@2位数日期 |
| @H_404_1@d | @H_404_1@23 | @H_404_1@1位数日期 |
| @H_404_1@d! | @H_404_1@23 | @H_404_1@1位数或2位数日期 |
| @H_404_1@EEEE | @H_404_1@星期四 | @H_404_1@ |
| @H_404_1@EEE | @H_404_1@周四 | @H_404_1@ |
| @H_404_1@HH | @H_404_1@17 | @H_404_1@24小时制 小时 |
| @H_404_1@H | @H_404_1@17 | @H_404_1@ |
| @H_404_1@hh | @H_404_1@05 | @H_404_1@12小时制 小时 |
| @H_404_1@h | @H_404_1@5 | @H_404_1@ |
| @H_404_1@mm | @H_404_1@35 | @H_404_1@分钟 |
| @H_404_1@m | @H_404_1@35 | @H_404_1@ |
| @H_404_1@sss | @H_404_1@196 | @H_404_1@毫秒 |
| @H_404_1@ss | @H_404_1@08 | @H_404_1@秒 |
| @H_404_1@s | @H_404_1@8 | @H_404_1@ |
| @H_404_1@a | @H_404_1@下午 | @H_404_1@上午或下午 |
| @H_404_1@Z | @H_404_1@+0800 | @H_404_1@时区 |
| @H_404_1@ww | @H_404_1@25 | @H_404_1@当年的第几周 |
| @H_404_1@w | @H_404_1@25 | @H_404_1@ |
| @H_404_1@G,GG,GGG,GGGG | @H_404_1@公元 | @H_404_1@公元或公元前 |
| @H_404_1@fullDate | @H_404_1@2016年6月23日星期四 | @H_404_1@ |
| @H_404_1@longDate | @H_404_1@2016年6月23日 | @H_404_1@ |
| @H_404_1@medium | @H_404_1@2016年6月23日 下午5:35:08 | @H_404_1@ |
| @H_404_1@mediumDate | @H_404_1@2016年6月23日 | @H_404_1@ |
| @H_404_1@mediumTime | @H_404_1@下午5:35:08 | @H_404_1@ |
| @H_404_1@short | @H_404_1@16/6/23 下午5:35 | @H_404_1@ |
| @H_404_1@shortDate | @H_404_1@16/6/23 | @H_404_1@ |
| @H_404_1@shortTime | @H_404_1@下午5:35 | @H_404_1@ |
@H_404_1@uib-datepicker-popup控件可以使用的属性有：
| @H_404_1@属性 | @H_404_1@默认值 | @H_404_1@备注 |
| @H_404_1@alt-input-formats | @H_404_1@[] | @H_404_1@手动输入日期时可接受的格式 |
| @H_404_1@clear-text | @H_404_1@clear | @H_404_1@清空按钮的文本 |
| @H_404_1@close-on-date-selection | @H_404_1@true | @H_404_1@选择一个日期后是否关闭日期面板 |
| @H_404_1@close-text | @H_404_1@close | @H_404_1@关闭按钮的文本 |
| @H_404_1@current-text | @H_404_1@today | @H_404_1@今天按钮的文本 |
| @H_404_1@datepicker-append-to-body | @H_404_1@false | @H_404_1@是否将日期面板放在body元素中 |
| @H_404_1@datepicker-options | @H_404_1@ | @H_404_1@对Datepicker控件的配置 |
| @H_404_1@datepicker-popup-template-url | @H_404_1@uib/template/datepickerPopup/popup.html | @H_404_1@ |
| @H_404_1@is-open | @H_404_1@false | @H_404_1@是否显示日期面板 |
| @H_404_1@on-open-focus | @H_404_1@true | @H_404_1@打开日期面板时是否获取焦点 |
| @H_404_1@show-button-bar | @H_404_1@true | @H_404_1@是否在日期面板下方显示”今天”,”关闭”等按钮 |
| @H_404_1@type | @H_404_1@text | @H_404_1@可以改为date|datetime-local|month，这样会改变日期面板的日期格式化。 |
| @H_404_1@popup-placement | @H_404_1@auto bottom-left | @H_404_1@在位置前加一个auto,表示日期面板会定位在它最近一个可以滚动的父元素中.可以设置的位置有:top top-left top-right bottom bottom-left bottom-right left left-top left-bottom right right-top right-bottom |
| @H_404_1@uib-datepicker-popup | @H_404_1@yyyy-MM-dd | @H_404_1@显示日期的格式。可使用的格式见上面的列表。 |
对于datepicker-append-to-body属性，值为false时弹出面板的html会紧跟在input元素的后面，值为true时面板html会放在body元素中。如果要对面板的样式做特殊调整时，使用这个属性会比较方便（因为紧跟在input元素后面会继承父元素的样式，放在body元素中可以单独为这个面板设置样式）
@H_404_1@对于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控件，那就没有意义了。
@H_404_1@因为uib-datepicker-popup扩展了Datepicker控件，所以uib-datepicker-popup可以使用Datepicker的配置，也就是datepicker-options，这是一个Json对象，可以设置的项有：
| @H_404_1@键 | @H_404_1@默认值 | @H_404_1@备注 |
| @H_404_1@customClass | @H_404_1@ | @H_404_1@一个可选的函数，设置日期面板中每个日期的样式。传入参数为一个json对象{date: obj1,mode: obj2}，返回值为类的名字 |
| @H_404_1@dateDisabled | @H_404_1@ | @H_404_1@一个可选的函数，设置日期面板中每个日期是否可选。传入参数为一个json对象{date: obj1,mode: obj2}，返回值为bool类型 |
| @H_404_1@datepickerMode | @H_404_1@day | @H_404_1@可设置为day,month,year。表示控件的选择模式 |
| @H_404_1@formatDay | @H_404_1@dd | @H_404_1@天数的格式化形式 |
| @H_404_1@formatMonth | @H_404_1@MMMM | @H_404_1@月份的格式化形式 |
| @H_404_1@formatYear | @H_404_1@yyyy | @H_404_1@年份的格式化形式 |
| @H_404_1@formatDayHeader | @H_404_1@EEE | @H_404_1@星期的格式化形式 |
| @H_404_1@formatDayTitle | @H_404_1@MMMM yyyy | @H_404_1@按天数选择日期时，面板中当前月份和年份的格式化形式（显示为：六月 2016 的地方） |
| @H_404_1@formatMonthTitle | @H_404_1@yyyy | @H_404_1@按月份选择日期时，面板中当前年份的格式化形式 |
| @H_404_1@initDate | @H_404_1@null | @H_404_1@初始化日期 |
| @H_404_1@maxDate | @H_404_1@null | @H_404_1@可选择的最大日期（必须是Javascript日期类型） |
| @H_404_1@maxMode | @H_404_1@year | @H_404_1@可选择的最大日期模式 |
| @H_404_1@minDate | @H_404_1@null | @H_404_1@可选择的最小日期（必须是Javascript日期类型） |
| @H_404_1@minMode | @H_404_1@day | @H_404_1@可选择的最小日期模式 |
| @H_404_1@shortcutPropagation | @H_404_1@false | @H_404_1@是否禁用键盘事件传播 |
| @H_404_1@showWeeks | @H_404_1@true | @H_404_1@是否显示面板中的日期是当年的第几周 |
| @H_404_1@startingDay | @H_404_1@$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK | @H_404_1@一个星期从周几开始。可设置为0到6的数字，0表示周日，6表示周六 |
| @H_404_1@yearRows | @H_404_1@4 | @H_404_1@选择年份时显示多少行 |
| @H_404_1@yearColumns | @H_404_1@5 | @H_404_1@选择年份时显示多少列 |
