AngularJs的UI组件Datepicker Popup
|
Datepicker Popup是用来选择日期的控件，一般和文本框一起使用，功能和Jquery的插件My97DatePicker一样。在Datepicker Popup内部使用了ui-bootstrap的另一个组件Datepicker，是Datepicker的扩展。 使用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 head 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 title></ 6 link href="/Content/bootstrap.css" rel="stylesheet" 7 script src="/Scripts/angular.js"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 body26 div ng-controller="DatepickerPopupDemoCtrl"27 p class="form-group"28 ="input-group"29 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 span ="input-group-btn"32 button ="button"="btn btn-default" ng-click="open1()"><i ="glyphicon glyphicon-calendar"ibutton33 span34 div35 p36 37 38 html>
其中最关键是这个：uib-datepicker-popup="{{format}}"，uib-datepicker-popup支持多种格式化方式，以2016-6-23 17:35:08这个日期为例，格式化文本和格式化后的值是：
uib-datepicker-popup控件可以使用的属性有：
对于datepicker-append-to-body属性，值为false时弹出面板的html会紧跟在input元素的后面，值为true时面板html会放在body元素中。如果要对面板的样式做特殊调整时，使用这个属性会比较方便（因为紧跟在input元素后面会继承父元素的样式，放在body元素中可以单独为这个面板设置样式） 对于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控件，那就没有意义了。 因为uib-datepicker-popup扩展了Datepicker控件，所以uib-datepicker-popup可以使用Datepicker的配置，也就是datepicker-options，这是一个Json对象，可以设置的项有：
这是一个使用customClass自定义样式和dateDisabled自定义禁选范围的例子： |