AngularJs的UI组件ui-Bootstrap分享（四）—

Datepicker Popup是用来选择日期的控件，一般和文本框一起使用，功能和Jquery的插件My97DatePicker一样。在Datepicker Popup内部使用了ui-bootstrap的另一个组件Datepicker，是Datepicker的扩展。

使用Datepicker Popup前，一定要引用angular-locale_zh-cn.js这个脚本，否则显示出来的月份和星期就是英文了。

先来看一个最简单的用法：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script src="/Scripts/angular-locale_zh-cn.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DatepickerPopupDemoCtrl', function ($scope) {

             $scope.dat = new Date();

             $scope.format = "yyyy/MM/dd";

             $scope.altInputFormats = ['yyyy/M!/d!'];

             $scope.popup1 = {

                 opened: false

             };

             $scope.open1 = function () {

                 $scope.popup1.opened = true;

             };

         });

     </script>

 </head>

 <body>

     <div ng-controller="DatepickerPopupDemoCtrl">

         <p class="form-group">

             <div class="input-group">

                 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="关闭"

                        clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" />

                 <span class="input-group-btn">

                     <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>

                 </span>

             </div>

         </p>

     </div>

 </body>

 </html>

其中最关键是这个：uib-datepicker-popup="{{format}}"，uib-datepicker-popup支持多种格式化方式，以2016-6-23 17:35:08这个日期为例，格式化文本和格式化后的值是：

格式化文本	值	备注
yyyy	2016	4位数年份
yy	16	2位数年份
y	2016	1到4位数年份
MMMM	六月
MMM	6月
MM	06	2位数月份
M	6	1位数月份
M!	06	1位或2位数月份
dd	23	2位数日期
d	23	1位数日期
d!	23	1位数或2位数日期
EEEE	星期四
EEE	周四
HH	17	24小时制小时
H	17
hh	05	12小时制小时
h	5
mm	35	分钟
m	35
sss	196	毫秒
ss	08	秒
s	8
a	下午	上午或下午
Z	+0800	时区
ww	25	当年的第几周
w	25
G,GG,GGG,GGGG	公元	公元或公元前
fullDate	2016年6月23日星期四
longDate	2016年6月23日
medium	2016年6月23日下午5:35:08
mediumDate	2016年6月23日
mediumTime	下午5:35:08
short	16/6/23 下午5:35
shortDate	16/6/23
shortTime	下午5:35

uib-datepicker-popup控件可以使用的属性有：

属性	默认值	备注
alt-input-formats	[]	手动输入日期时可接受的格式
clear-text	clear	清空按钮的文本
close-on-date-selection	true	选择一个日期后是否关闭日期面板
close-text	close	关闭按钮的文本
current-text	today	今天按钮的文本
datepicker-append-to-body	false	是否将日期面板放在body元素中
datepicker-options		对Datepicker控件的配置
datepicker-popup-template-url	uib/template/datepickerPopup/popup.html
is-open	false	是否显示日期面板
on-open-focus	true	打开日期面板时是否获取焦点
show-button-bar	true	是否在日期面板下方显示”今天”,”关闭”等按钮
type	text	可以改为date\|datetime-local\|month，这样会改变日期面板的日期格式化。
popup-placement	auto bottom-left	在位置前加一个auto,表示日期面板会定位在它最近一个可以滚动的父元素中.可以设置的位置有:top top-left top-right bottom bottom-left bottom-right left left-top left-bottom right right-top right-bottom
uib-datepicker-popup	yyyy-MM-dd	显示日期的格式。可使用的格式见上面的列表。

对于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		一个可选的函数，设置日期面板中每个日期的样式。传入参数为一个json对象{date: obj1, mode: obj2}，返回值为类的名字
dateDisabled		一个可选的函数，设置日期面板中每个日期是否可选。传入参数为一个json对象{date: obj1, mode: obj2}，返回值为bool类型
datepickerMode	day	可设置为day,month,year。表示控件的选择模式
formatDay	dd	天数的格式化形式
formatMonth	MMMM	月份的格式化形式
formatYear	yyyy	年份的格式化形式
formatDayHeader	EEE	星期的格式化形式
formatDayTitle	MMMM yyyy	按天数选择日期时，面板中当前月份和年份的格式化形式（显示为：六月 2016 的地方）
formatMonthTitle	yyyy	按月份选择日期时，面板中当前年份的格式化形式
initDate	null	初始化日期
maxDate	null	可选择的最大日期（必须是Javascript日期类型）
maxMode	year	可选择的最大日期模式
minDate	null	可选择的最小日期（必须是Javascript日期类型）
minMode	day	可选择的最小日期模式
shortcutPropagation	false	是否禁用键盘事件传播
showWeeks	true	是否显示面板中的日期是当年的第几周
startingDay	$locale.DATETIME_FORMATS.FIRSTDAYOFWEEK	一个星期从周几开始。可设置为0到6的数字，0表示周日，6表示周六
yearRows	4	选择年份时显示多少行
yearColumns	5	选择年份时显示多少列

这是一个使用customClass自定义样式和dateDisabled自定义禁选范围的例子：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script src="/Scripts/angular-locale_zh-cn.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('DatepickerPopupDemoCtrl', function ($scope) {

             $scope.dat = new Date();

             $scope.format = "yyyy/MM/dd";

             $scope.altInputFormats = ['yyyy/M!/d!'];

             $scope.popup1 = {

                 opened: false

             };

             $scope.open1 = function () {

                 $scope.popup1.opened = true;

             };

             $scope.dateOptions = {

                 customClass: getDayClass,//自定义类名

                 dateDisabled: isDisabled//是否禁用

             }

             var tomorrow = new Date();

             tomorrow.setDate(tomorrow.getDate() + 1);

             var afterTomorrow = new Date();

             afterTomorrow.setDate(tomorrow.getDate() + 1);

             $scope.events = [

               {

                   date: tomorrow,

                   status: 'full'

               },

               {

                   date: afterTomorrow,

                   status: 'partially'

               }

             ];

             //为日期面板中的每个日期（默认42个）返回类名。传入参数为{date: obj1, mode: obj2}

             function getDayClass(obj) {

                 var date = obj.date,

                   mode = obj.mode;

                 if (mode === 'day') {

                     var dayToCheck = new Date(date).setHours(0, 0, 0, 0);

                     for (var i = 0; i < $scope.events.length; i++) {

                         var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);

                         if (dayToCheck === currentDay) {

                             return $scope.events[i].status;

                         }

                     }

                 }

                 return '';

             }

             //设置日期面板中的所有周六和周日不可选

             function isDisabled(obj) {

                 var date = obj.date,

                   mode = obj.mode;

                 return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);

             }

         });

     </script>

     <style>

         .full button span {

             background-color: limegreen;

             border-radius: 32px;

             color: black;

         }

         .partially button span {

             background-color: orange;

             border-radius: 32px;

             color: black;

         }

     </style>

 </head>

 <body>

     <div ng-controller="DatepickerPopupDemoCtrl">

         <p class="form-group">

             <div class="input-group">

                 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dat" is-open="popup1.opened" ng-required="true" close-text="关闭"

                        clear-text="清空" current-text="今天" alt-input-formats="altInputFormats" datepicker-options="dateOptions" />

                 <span class="input-group-btn">

                     <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>

                 </span>

             </div>

         </p>

     </div>

 </body>

 </html>

注意禁选日期的显示和自定义类的显示。

在打开日期面板时，可以使用键盘来选择日期，上下左右和PgUp，PgDn，Home，End，Ctrl+Up，Ctrl+Down选择范围，空格或者回车选择日期，Esc退出面板。

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup的更多相关文章

Android用户界面UI组件--AdapterView及其子类(四) GridView
GridView常用的XML属性: android:columnWidth 设置列的宽度. android:horizontalSpacing 两列之间的间距. android:numColum ...
Android用户界面 UI组件--TextView及其子类(四) Chronometer计时器
Chronometer是一个简单的定时器,你可以给它一个开始时间,并以此定时,或者如果你不给它一个开始时间,它将会使用你的时间通话开始.默认情况下它会显示在当前定时器的值的形式“分:秒”或“H:MM: ...
Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目属性作用可选值 side 配置侧边栏的位置 start end me ...
Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中找 Swiper Api:http://ida ...
Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
挂号平台首页开发（UI组件部分）
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...
AngularJs的UI组件ui-Bootstrap分享（一）
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

随机推荐

NaN
not a number 全称, 任何数/0 js会出现NaN alert(NaN==NaN); // false isNaN(NaN); // true alert(isNaN(10)); // f ...
mfc显示静态图片最简单的方法
一致都是研究如何调用opencv显示动态图片,但是很多时候在显示图标的时候,都是需要显示静态图片,现在将最简单的方法总结下: 1.添加picture控件 2.添加资源,要求为bmp 3.修改属性结果 ...
OS X 下iso刻录U盘
1. 查看盘 $diskutil list /dev/disk0 #: TYPE NAME SIZE IDENTIFIER : GUID_partition_scheme *320.1 GB disk ...
wifipineapple使用教程
1.把开关拨到右边如果有灯亮说明有电 4个灯全亮说明电量是满的以此类推如果一个也不亮说明没电了需要用充电器充电 2.把开关拨到左边打开wifi的开关会开启一个wifi大概一分钟左右会有wif ...
winform开发框架之模块维护
前言:模块维护试图解决的问题, 模块加载只用MEF的方式: MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库. 应用程序开发人员可利用该库 ...
手机号码归属地查询api接口
淘宝网 API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15850781443 参数: tel:手机号码返回:JSON ...
Sprint(第四天11.17)
燃尽图
loadrunner常用术语
1.场景在loadrunner中主要表现为controller中设计与执行测试用例中的用户场景.主要工作有,在controller中选择虚拟用户脚本.设置虚拟用户数量.配置虚拟用户运行时的行为.选择 ...
IP和端口的相关检测
1.查看自己电脑的ip,使用ipconfig命令 2.检测某个ip是否可以连通,直接使用ping命令 3.windows下查看本机都有哪些端口开放,使用netstat -anp tcp 命令 4.查看 ...
Android技能树
第一部分:Android(安卓)Android基础知识Android内存泄漏总结Handler内存泄漏分析及解决Android性能优化ListView详解RecyclerView和ListView的异 ...

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup的更多相关文章

随机推荐

热门专题