bootstrap-datetimepicker之初探

来源：互联网发布：我的淘宝店网址是什么编辑：程序博客网时间：2024/06/06 05:03

bootstrap-datetimepicker为Bootstrap前端框架的一个日期选择器插件。中文官网首页

示例如下：

<!DOCTYPE html><html lang="zh-CN"><head>    <title>Bootstrap-datetimepicker | 初探</title><meta charset="utf-8"/>    <link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"></head><body><div class="container">    <form action="" class="form-horizontal"  role="form">        <fieldset>            <legend>Test</legend><div class="form-group">                <label for="dtp_input1" class="col-md-2 control-label">日期时间选择器：</label>                <div id="dtp_input1" class="input-group date col-md-4">                    <input class="form-control" type="text" value="">                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span><span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>                </div>            </div>        </fieldset>    </form></div><script type="text/javascript" src="../../jquery-1.x.min.js" charset="UTF-8"></script><!-- <script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script> --><script type="text/javascript" src="../js/bootstrap-datetimepicker.js"></script><script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js"></script><script type="text/javascript">//.datetimepicker(options)初始化日期时间选择器;$('#dtp_input1').datetimepicker({language : 'zh-CN',format : 'yyyy-mm-dd hh:ii:ssZ p',todayBtn : true,autoclose : true});</script></body></html>

该博文完整示例见：http://download.csdn.net/detail/u013142248/9807052

1.依赖库

须先引入jquery库和bootstrap的css样式库，bootstrap的js不影响该日期时间选择器的正常使用；

注意： .datetimepicker(options)用来初始化日期时间选择器的元素必须定义class="date"，否则样式存在问题，bootstrap.css对样式的边框效果有作用；同时该元素必须定义一个标识用来初始化日期时间选择器（上面的例子标识符为id="dtp_input1"），标识符与class="date"须同级，否则无法弹出日期时间选择器的选择框；它们所在的层级决定了点击哪里弹出日期选择器（本例放在input的外层，点击框内部分出现日期时间选择器；如果需要点击input框弹出日期时间选择器，须同时将初始化日期时间选择器的标识符和class="date"放在input框元素中）。

2.language

日期选择器的语言，默认"en"，可根据需要的语言实行本地化；在jquery之后须引入依赖库。

如引入bootstrap-datetimepicker.zh-CN.js，language:'zh-CN'。

3.视图

日期时间选择器有5种视图

0 or 'hour' for the hour view（小时视图：选某个小时的分钟数，无法选到秒，秒根据加载页面的秒自动给出值）
1 or 'day' for the day view（天视图：选小时）
2 or 'month' for month view (the default)（月视图：选日期；）
3 or 'year' for the 12-month overview（年视图：选月份）
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.（年代视图：选年份）

startView：日期时间选择器打开之后首先显示的视图；日期时间选择器打开之后首先显示的视图（默认值：2，选日期）。

minView：日期时间选择器所能够提供的最精确的时间选择视图；默认值：0, 'hour'。

maxView：日期时间选择器最高能展示的选择范围视图；默认值：4, 'decade'。

（示例：id="dtp_input1"~id="dtp_input5"，示例在附件中）

startView为日期选择器首先展示的视图，在我们选择日期时间的时候总是从视图值大的往小的依次选取；当maxView大于startView可点击日期时间选择器顶部正中切换到maxView，如果maxView小于startView则日期时间选择器无法使用。（示例：id="dtp_input11"~id="dtp_input14"）

日期时间选择器顶部的左右箭头根据视图不同，作用不同。

4.minuteStep

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。默认值5；见示例id="dtp_input5"。

5.format

视图只是决定了可选哪些视图，而对展示的日期时间格式不影响；（示例：id="dtp_input7"和id="dtp_input8"）

日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 可任意组合。

p : meridian in lower case ('am' or 'pm') - according to locale file
P : meridian in upper case ('AM' or 'PM') - according to locale file
s : seconds without leading zeros（秒数小于10无前导0；）
ss : seconds, 2 digits with leading zeros（秒数小于10有前导0，始终保持两位秒数；）
i : minutes without leading zeros（分钟小于10无前导0；）
ii : minutes, 2 digits with leading zeros（分钟小于10有前导0，始终保持两位分钟；）
h : hour without leading zeros - 24-hour format（24小时制，小时小于10无前导0）
hh : hour, 2 digits with leading zeros - 24-hour format（24小时制，小时小于10有前导0）
H : hour without leading zeros - 12-hour format（12小时制，小时小于10无前导0）
HH : hour, 2 digits with leading zeros - 12-hour format（12小时制，小时小于10有前导0）
d : day of the month without leading zeros（天数小于10无前导0；）
dd : day of the month, 2 digits with leading zeros（天数小于10有前导0；）
m : numeric representation of month without leading zeros
mm : numeric representation of the month, 2 digits with leading zeros
M : short textual representation of a month, three letters（显然于language="en"不适用）
MM : full textual representation of a month, such as January or March（显然于language="en"不适用）
yy : two digit representation of a year
yyyy : full numeric representation of a year, 4 digits
t : unix epoch timestamp（时间以时间戳格式显示）
Z : abbreviated timezone name（显示时区）

示例：id="dtp_input6"~id="dtp_input10"；

6.weekStart

一周从哪一天开始。默认：0，为周日（0-6分别代表周日~周六）；见示例：id="dtp_input15"与前面示例的区别。

7.autoClose

当选择一个日期之后是否立即关闭此日期时间选择器；默认：false；见示例：id="dtp_input15"与前面示例的区别。

8.todayBtn

如果此值为true 或 "linked"，则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话，"Today" 按钮仅仅将视图转到当天的日期，如果是"linked"，当天日期将会被选中。(见示例：id="dtp_input16"，没见着true和"linked"的区别)。

9.todayHighlight

如果为true, 高亮当前日期；默认为true；(见示例：id="dtp_input16"，浅橙色高亮；是否看得到高亮效果与视图有关)。

10.startDate和endDate

限制日期选择范围，但鉴于手动修改的日期不在范围内部检测的问题，给元素加上readonly属性；后期看是否可以检测手工录入的日期是否符合范围要求。

示例：id="dtp_input17"、id="dtp_input25";startDate、endDate可以+ - y m d；别让startDate大于endDate，否则无法选取日期；

两个输入框后者要晚于前者的示例见id="dtp_input26"和id="dtp_input27"，参考bootstrap-datepicker限定可选时间范围

$('#dtp_input26').datetimepicker({language: 'zh-CN',format : 'yyyy-mm-dd',startView : 2,minView : 2,todayBtn : true,todayHighlight : true,autoclose : true,endDate : new Date()}).on('changeDate',function(e){var startTime = e.date;$('#dtp_input27').datetimepicker('setStartDate',startTime);});$('#dtp_input27').datetimepicker({language: 'zh-CN',format : 'yyyy-mm-dd',startView : 2,minView : 2,todayBtn : true,todayHighlight : true,autoclose : true,endDate : new Date()}).on('changeDate',function(e){var endTime = e.date;$('#dtp_input26').datetimepicker('setEndDate',endTime);});

另外还看见一个例子：http://blog.csdn.net/liusaint1992/article/details/52590681

11.daysOfWeekDisabled

周内哪些天不可选，默认值: '', []，0~6分别代表周日~周六，后期看是否可以检测手工录入的日期是否符合范围要求。

12.keyboardNavigation

是否允许通过方向键改变日期；默认：true，可有键盘上下左右方向键选择；不可选择时间，示例：id="dtp_input18"；

13.forceParse

当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。默认：true；见示例id="dtp_input19"和id="dtp_input18"的区别。

14.pickerReferer

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.默认值: 'default' (other value available : 'input')；不知道是什么。

15.pickerPosition

此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。默认：‘bottom-right’，不是根据日期选择器在的位置自动判断的。

16.viewSelect

With this option you can select the view from which the date will be selected. By default it's the last one, however you can choose the first one, so at each click the date will be updated.
Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')；示例：id="dtp_input22"，未看见效果。

17.showMeridian

This option will enable meridian views for day and hour views.默认：false；分上下午。

18.initialDate

You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...默认值：new Date()；为当前日期时间，修改示例：id="dtp_input24"；

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

提高点：
1.bootstrap-datetimepicker：
1)todayBtn中true和"linked"的区别;
2)datetimepicker()中set
3)在元素中设置属性data-date等
4)viewSelect
5)daysOfWeekDisabled可以指定周中哪些天不可选，startDay和endDate可以限制范围外不可选，
是否可直接指定某些日期不可选;
6)检测手工录入是否超出范围;
7)试着无须依赖bootstrap.css
8)双日历
9)农历、节假日、二十四节气
10)不显示input框

0 0