1.官网地址
2.属性及使用示例
2.1调用
html: <input type="text" readonly class="date" data-link-field="date" /> <input type="hidden" id="date" /> js: $('.date').datetimepicker(); |
选中的日期会被存放在id为date的input里。
2.2 format(日期时间格式)
该属性控制日期的显示方式。属性具体说明如下
符号 | 意义 |
yyyy | 年,全称。如2017 |
yy | 年,简称。只显示后面2位。如17 |
MM | 月,全称。月份显示为英文/中文。如April/四月 |
M | 月,简称。如Apr/四 |
mm | 月,全称。如03 |
m | 月,简称。如3 |
HH | 时,全称,12小时制。前面补0,如05 |
H | 时,简称,12小时制。前面不补0,如5 |
hh | 时,全称,24小时制。前面补0 |
h | 时,全称,24小时制。前面不补0 |
ii | 分,全称,前面补0 |
i | 分,全称,前面不补0 |
ss | 秒,全称,前面补0 |
s | 秒,全称,前面不补0 |
P | 大写的P,12小时制且大写'AM'或'PM' |
p | 小写的p,12小时制且小写'am'或'pm' |
示例1:2017-03-30 上午 09:50
$('.form_dateTime').datetimepicker({ |
示例2:2017-03-30
$('.form_dateTime').datetimepicker({ |
示例3:仅选择时间
$('.form_time').datetimepicker({ |
hh:ii 选中的时间是24小时制 HH:ii 选中的时间是12小时制的(如果选中的是17:50,在页面上显示为05:50)
也可以在input里面设置format:
<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii"> |
format的格式可以根据表格说明DIY,哈哈。
2.3 weekStart 一周从那一天开始
类型:Integer
默认值:0(0-6表示星期日到星期六)
示例:从星期三开始
$('.form_dateTime').datetimepicker({ |
显示截图:
2.4 startDate 开始时间
类型:Date
startDate之前的日期都不能选择。
示例:只能选择当前时间之后的时间
$('.form_dateTime').datetimepicker({ startDate:new Date() }); |
显示结果: 如下图所示,今天之前的日期都是灰色,并且不可选择。
2.5 endDate 结束时间
类型:Date
endDate之后的时间都不可以选择。
2.6 daysOfWeekDisabled 一周禁用的日期
类型:String,Array
默认值:'',[]
0-6表示星期日-星期六。
示例:''格式,星期一、五不能选
$('.form_date').datetimepicker({ daysOfWeekDisabled:'1,5' |
示例:[]格式,星期一、五不能选
$('.form_date').datetimepicker({ |
显示结果:如下图所示,星期一、五的日期呈灰色,不能选中。
2.7 autoclose 是否自动关闭日期选择器
类型:Boolean
默认值:false,不自动关闭。
true:自动关闭
2.8 startView 日期时间选择器打开之后首先显示的视图。
类型:Number,String
默认值:'2','month'
具体属性说明如下:
值 | 意义 |
0 | 从小时视图开始,选时分 |
1 | 从天视图开始,选时 |
2 | 从月视图开始,选天 |
3 | 从年视图开始,选月 |
4 | 从十年视图开始,选年 |
示例:从小时视图开始
$('.form_date').datetimepicker({ startView: 0 |
显示结果:左右按钮变化的是时分。
2.9 minView 日期时间选择器所能提供的最精确的时间选择视图
类型:Number,String
默认值:0,'hour'
具体属性说明如下:
值 | 意义 |
0 | 从小时视图开始,选时分 |
1 | 从天视图开始,选时 |
2 | 从月视图开始,选天 |
3 | 从年视图开始,选月 |
4 | 从十年视图开始,选年 |
示例:从年视图开始
$('.form_date').datetimepicker({ minView: 3 |
选完月后,不再出现下级时间选择面板。
2.10 maxView 日期选择器最高能展示的范围视图
类型:Number, String
默认值:4, 'decade'
2.11 todayBtn 是否显示'today'按钮
类型:Boolean, "linked"
默认值: false
如果值为true或'linkd',则日期底部显示'today'按钮,用以选择当前日期。
如果是true的话,'today'按钮仅仅将视图转到当天的日期,如果是'linked',当天日期将被选中。
$('.form_date').datetimepicker({ todayBtn: true |
显示结果:
2.12 todayHighlight 当天日期高亮
类型:Boolean
默认值:false
false:不高亮;true:高亮
2.13 keyboardNavigation 方向键改变日期
类型:Boolean
默认值:false
false:方向键不能改变日期;true:方向键可以改变日期
2.14 language 语言
类型:String
默认值:en
en:英文;zh-CN:中文
需要中文显示日历时,可以引入中文包,也可以自己写一段汉化js覆盖。
汉化js代码如下:
$.fn.datetimepicker.dates['zh'] = { |
2.15 forceParse 强制解析
类型:Boolean
默认值:true
在输入的值不是你规定的格式(format)时,会尽量解析成你规定格式
2.16 minuteStep 步进值
类型:Number
默认值:5
步进值用于构建小时视图。以分钟为单位。如下图所示,分钟5分钟为一个值。
2.17 pickerPosition 选择框的位置
类型:String
默认值:bottom-right
其他值:bottom-left,top-right,top-left
2.18 showMeridian 是否显示上午/下午
类型:Boolean
默认值:false
false:不显示;true:显示
在选择时分的界面,是否显示上午/下午
2.19 initialDate 初始化日期时间
类型:Date,String
默认值:new Date()
在打开时默认选择当时的时间,显示在时间日期选择器上。
3.使用
3.1绑定输入框,并设置format选项
使用js设置format属性:
html: <input type="text" value="2012-05-15 21:05" class="date" data-link-field="date" /> <input type="hidden" value="" id="date" /> js: $('#datetimepicker').datetimepicker({ format: 'yyyy-mm-dd hh:ii' }); |
或在input里直接设置format属性:
html: <input type="text" value="2012-05-15 21:05" class="date" data-link-field="date" data-date-format="yyyy-mm-dd hh:ii" /> <input type="hidden" value="" id="date" /> js: $('#datetimepicker').datetimepicker(); |
选择的时间被存放在id为'date'的input中。
3.2作为组件使用:
html: <div class="form-group"> js: $('.form_datetime').datetimepicker(); |
显示结果:
说明:
①.通过div的样式'.form_datetime'来初始化时间日期选择器。
②.第一个span样式是关闭按钮,第二个span样式是日历图标。
属性说明:
data-date:日期时间选择器面板上初始选中的值。与initialDate作用相同
data-date-format:设置日期时间格式。
data-link-field:映射值,该属性的只能是另一个标签的id。将选中的日期时间映射到data-link-field的值所在的标签。
如上例中,将选中的日期时间存放在<input type="hidden" id="dtp_input1" value="" />中。
3.3时间范围选择联动
开始日期不能大于结束日期,结束日期不能小于开始日期。
<div class="form-group"> |
$('.startDate').datetimepicker({ $('.startDate).datetimepicker('hide'); $('.endDate').datetimepicker('setStartDate',startTime); |