介绍:bootstrap-datetimepicker是bootstrap-datepicker的一个扩展项目,后者只能选择日期,而不能选择时间,本文主要讲解bootstrap-datetimepicker的使用,方便以后快速使用这个插件,而不用反复的记忆,反复的花时间搜索和学习。
getting start
1)引入文件
下载源码之后解压得到以下目录结构,我们只需要js和css文件夹下的代码。
将以下三个文件复制到项目中,然后在html中分别包含就可以了,(注意他依赖bootstrap和jQuery)
2)标签模板
<div class="input-group input-daterange">
<input id="effect-time" name="effectTime" data-date-format="yyyy-mm-dd
hh:ii:ss" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
3)JS作用于标签,使其生效
$("#effect-time").datetimepicker({
language: 'zh-CN',
autoclose: true,
startView: 2,
weekStart: 1,
todayBtn: 1,
todayHighlight: 1,
forceParse: 0,
showMeridian: 1
});
4)一些常用选项解释
language 指定语言
autoclose 选择完毕后自动关闭选择框
startView 指定选择的视图从哪里开始,包括时分秒,年月日等
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.
weekStart 一周从哪一天开始。0(星期日)到6(星期六)
todayBtn 显示'今天'按钮
todayHighlight 在选择框中高亮 '今天'
forceParse 当选择器关闭的时候,是否强制解析输入框中的值。也就是说,当用户在输入框中输入了不正确的日期,选择器将会尽量解析输入的值,并将解析后的正确值按照给定的格式format设置到输入框中。
format 日期格式, 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
ss : seconds, 2 digits with leading zeros
i : minutes without leading zeros
ii : minutes, 2 digits with leading zeros
h : hour without leading zeros - 24-hour format
hh : hour, 2 digits with leading zeros - 24-hour format
H : hour without leading zeros - 12-hour format
HH : hour, 2 digits with leading zeros - 12-hour format
d : day of the month without leading zeros
dd : day of the month, 2 digits with leading zeros
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
MM : full textual representation of a month, such as January or March
yy : two digit representation of a year
yyyy : full numeric representation of a year, 4 digits
5):一些实用的方法
$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');
设置日期时间选择框中的开始时间,在这个时间之前的时间都不能被选择
ENDING
如果还有什么不明白的就去看文档