jquery datetimepicker 配置参数

使用方法：

<linkrel="stylesheet"type="text/css"href="jquery.datetimepicker.css"/>
<scriptsrc="jquery.main.js"></script>
<scriptsrc="jquery.datetimepicker.main.js"></script>

<inputtype="button"class=""id="datetimepicker"value="请选择时间"/>

$('#datetimepicker').datetimepicker({
step:10,
format:'Y-m-dH:i'
});

以上只是叙述jquerydatetimepicker的用法；知道了它的用法，就会想知道它的配置参数有哪些，代表着什么意思，这才是我们的重点。

$('#datetimepicker').datetimepicker({
value:''//设置当前datetimepicker的值
rtl:false,//false默认显示方式truetimepicker和datepicker位置变换
format:'Y/m/dH:i',//设置时间年月日时分的格式如:2016/11/1518:00
formatTime:'H:i',//设置时间时分的格式
formatDate:'Y/m/d',//设置时间年月日的格式
startDate:false,//newDate(),'1986/12/08','-1970/01/05','-1970/01/05',
step:10,//设置时间时分的间隔
closeOnDateSelect:false,//true设置datepicker可点击false设置datepicker不可点击实际上可以双击
closeOnTimeSelect:true,//true设置timepicker可点击false设置timepicker不可点击
closeOnWithoutClick:true,//true设置点击input可以隐藏datetimepickerfalse设置点击input不可以隐藏datetimepicker
closeOnInputClick:true,//true设置点击input可以隐藏datetimepickerfalse设置点击input不可以隐藏datetimepicker(会有闪动先隐藏再显示)
timepicker:true,//true显示timepickerfalse隐藏timepicker
datepicker:true,//true显示datepickerfalse隐藏datepicker
weeks:false,//true显示周数false隐藏周数
defaultTime:false,//如果输入值为空可用来设置默认显示时间useformatTimeformat(ex.'10:00'forformatTime:'H:i')
defaultDate:false,//如果输入值为空可用来设置默认显示日期useformatDateformat(exnewDate()or'1986/12/08'or'-1970/01/05'or'-1970/01/05')
minDate:false,//设置datepicker最小的限制日期如：2016/08/15
maxDate:false,//设置datepicker最大的限制日期如：2016/11/15
minTime:false,//设置timepicker最小的限制时间如：08:00
maxTime:false,//设置timepicker最大的限制时间如：18:00
allowTimes:[],//设置timepicker显示的时间如：allowTimes:['09:00','11:00','12:00','21:00']
opened:false,//false默认打开datetimepicker可关闭true打开datetimepicker后不可关闭
initTime:true,//设置timepicker默认时间如：08:00
inline:false,//ture设置datetimepicker一直显示
theme:'',//ture设置datetimepicker显示样式如:'dark'
withoutCopyright:true,//ture默认隐藏左下角'xdsoft.net'链接false显示左下角'xdsoft.net'链接
inverseButton:false,//false默认truedatepicker的上一月和下一月功能互换timepicker的上下可点击按钮功能互换
hours12:false,//true设置12小时格式false设置24小时格式
next:'xdsoft_next',//设置datepicker上一月按钮的样式
prev:'xdsoft_prev',//设置datepicker下一月按钮的样式
dayOfWeekStart:0,//设置默认第-列为周几如：0周日1周一
parentID:'body',//设置父级选择器
timeHeightInTimePicker:25,//设置timepicker的行高
timepickerScrollbar:true,//ture设置timepicker显示滑动条false设置timepicker不显示滑动条
todayButton:true,//ture显示今天按钮false不显示今天按钮位置在datepicker左上角
prevButton:true,//ture显示上一月按钮false不显示上一月按钮位置在datepicker左上角
nextButton:true,//ture显示下一月按钮false不显示下一月按钮位置在datepicker又上角
scrollMonth:true,//ture设置datepicker的月份可以滑动false设置datepicker的月份不可以滑动
lazyInit:false,//翻译：初始化插件发生只有当用户交互。大大加速插件与大量的领域的工作
mask:false,//使用输入掩码。真正的-自动生成一个字段的“格式”的面具，从0到9的数字，设置为值的最高可能的数字。例如：第一个小时的数字不能大于2，而第一位数字不能大于5如：{mask:'9999/19/3929:59',format:'Y/m/dH:i'}
validateOnBlur:true,//失去焦点时验证datetime值输入,。如果值是无效的datetime,然后插入当前日期时间值
yearStart:1950,//设置最小的年份
yearEnd:2050,//设置最大的年份
monthStart:0,//设置最小的月份
monthEnd:11,//设置最大的月份
roundTime:'round',//设置timepicker的计算方式round四舍五入ceil向上取整floor向下取整
allowDateRe:null,//设置正则表达式检查日期如：{format:'Y-m-d',allowDateRe:'\d{4}-(03-31|06-30|09-30|12-31)'}
disabledDates:[],//设置不可点击的日期如：disabledDates:['21.11.2016','22.11.2016','23.11.2016','24.11.2016','25.11.2016','26.11.2016']
disabledWeekDays:[],//设置不可点击的星期如：disabledWeekDays:[0,3,4]
yearOffset:0,//设置偏移年份如：2代表当前年份加2-2代表当前年份减2
beforeShowDay:null,//显示datetimepicker之前可调用的方法{beforeShowDay:function(d){console.log("bsd");}}
enterLikeTab:true,//tab按键均可使datetimepicker关闭true点击回车键可使datetimepicker关闭false点击回车键不可使datetimepicker关闭
showApplyButton:false//相当于确定按钮true显示false隐藏
});

简单叙述jquerydatetimepicker的相关点击方法

/*
*监听时间插件显示时的事件
*/
$('#datetimepicker').datetimepicker({
onShow:function(dateText,inst){
console.log("---已打开datetimepicker----");
}
});

/*
*监听时间插件关闭时的事件
*/
$('#datetimepicker').datetimepicker({
onClose:function(dateText,inst){
console.log("---已关闭datetimepicker----");
}
});

/*
*监听点击日期时的事件
*/

$('#datetimepicker').datetimepicker({
onSelectDate:function(dateText,inst){
console.log(dateText);
}
});

/*
*监听点击时分的事件
*/

$('#datetimepicker').datetimepicker({
onSelectTime:function(dateText,inst){
console.log(dateText);
}
});

/*
*监听点击datepicker上一月下一月按钮及选择月份点击事件
*/
$('#datetimepicker').datetimepicker({
onChangeMonth:function(dateText,inst){
console.log(dateText);
}
});
/*
*监听获取当前datetimepicker显示的所有日期信息
*/
$('#datetimepicker').datetimepicker({
onGetWeekOfYear:function(dateText,inst){
console.log(dateText);
}
});

/*
*监听选择年份的点击事件
*/
$('#datetimepicker').datetimepicker({
onChangeYear:function(dateText,inst){
console.log(dateText);
}
});

/*
*实时监听你选择的日期和时间
*/
$('#datetimepicker').datetimepicker({
onChangeDateTime:function(dateText,inst){
console.log(dateText);
}
});

/*
*实时监听datetimepicker上的所有事件
*/
$('#datetimepicker').datetimepicker({
onGenerate:function(dateText,inst){
console.log(dateText);
}
});

datepicker限定可选时间范围，使用参考