jquerydatetimepicker⽇期时间控件的使⽤及参数说明
⾸先下载
jquery.datetimepicker.css
jquery.datetimepicker.main.js
1. 引⼊css和js (注：该控件要依赖于jquery)
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css"/ >
<script src="jquery.main.js"></script>
<script src="jquery.datetimepicker.main.js"></script>
2.写⼀个input框
<input type="button" class="" id="datetimepicker"  value="请选择时间"  />
3.调⽤控件
$('#datetimepicker').datetimepicker({
lang: 'ch',//语⾔选择中⽂注：旧版本新版⽅法$.datetimepicker.setLocale('ch')
value: '2016-5-19',                    // 设置当前datetimepicker的默认值（即input框中默认的⽇期时间）
rtl: false,                    // false  默认显⽰⽅式  true timepicker和datepicker位置变换（⾃⼰验证没起作⽤）
format:    'Y/m/d H:i',        // 设置时间年⽉⽇时分的格式如: 2016/11/15 18:00
formatTime:    'H:i',          // 设置时间时分的格式
formatDate:    'Y/m/d',        // 设置时间年⽉⽇的格式
startDate:    false,          // new Date(), '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可以隐藏datetimepicker  false 设置点击input不可以隐藏datetimepicker
closeOnInputClick: true,      // true 设置点击input可以隐藏datetimepicker  false 设置点击input不可以隐藏datetimepicker  (会有闪动先隐藏再显⽰)
timepicker: true,              // true 显⽰timepicker  false 隐藏timepicker
datepicker: true,              // true 显⽰datepicker  false 隐藏datepicker
weeks: false,                  // true 显⽰周数  false 隐藏周数
defaultTime: false,            // 如果输⼊值为空可⽤来设置默认显⽰时间 use formatTime format (ex. '10:00' for formatTime:    'H:i')
defaultDate: false,            // 如果输⼊值为空可⽤来设置默认显⽰⽇期 use formatDate format (ex new Date() 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'链接  false 显⽰左下⾓'xdsoft'链接
inverseButton: false,          // false 默认  true datepicker的上⼀⽉和下⼀⽉功能互换  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/39 29:59',format:    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隐藏
});
4.
/*
*  监听时间插件显⽰时的事件
*/
$('#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) {
onblur和blur的区别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);
}
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。