前端控件之Jquery datetimepicker的使用总结
效果图
在介绍jquery datetimepicker的使用方法前,我们先来看一下它的实现效果图,这样以便让你更快地了解它是否是你所需要的。
下面我截了四张常用的效果图(截取自http://xdsoft.net/jqplugins/datetimepicker ),另外在这里我只总结了几个常用的功能,如果你正在使用该控件,而本文没有写到的,请到上面网站上查看使用方法。
使用方法
添加引用
<link type="text/css" href="css/jquery.datetimepicker.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type ="text/javascript" src="js/jquery.datetimepicker.js"></script>
HTML
<input id="datetimepicker" type="text" >
javaScript
$('#datetimepicker').datetimepicker();
按以上步骤我们就实现jquery datetimepicker的使用,当然这只是最基本的样式,另外jquery datetimepicker的样式控制是通过传一个json对象的参数给datetimepicker来实现的。下面我们举个例子来看下:
$("#start").datetimepicker({ format: 'Y/m/d', timepicker: false });
上面传入的参数就是用来设置显示日期的格式,以及弹出层只能选择日期,而不能选择时间。那我们接下来总结一下它常用的一些参数及其作用。
常用参数
名称 | 默认值 | 描述 | 例子 |
value | null | 设置值 |
|
lang | en |
设置样式显示语言, 中文:ch\zh\zh-TW |
{lang:'zh'} |
format | Y/m/d H:i | 日期格式(参考网站) |
|
timepicker | true | 显示时间选择部分 |
|
datepicker | true | 显示日期选择部分 | {datepicker:false} |
weeks | false | 显示周数 | {weeks:true} |
theme | 'default' | 皮肤样式 |
|
minDate | false |
设置可选择的最小日期(只有日期格式不包含时间部分才效) |
|
maxDate | false | {maxDate:0} |
|
minTime | false |
|
|
maxTime | false | ||
allowTimes | [] | 可供选择的时间点 |
|
mask | false |
{mask:'9999/19/39',format:'Y/m/d'} |
|
yearOffset | 0 | 默认年分偏移值 | {yearOffset:1} |
inline | false | 是否直接显示日历控件 | |
todayButton | true | 是否显示"跳转至今天“的按钮 | |
defaultSelect | true |
当input为空时,高亮显示现在的日期或时间 |
|
validateOnBlur | true |
当控件失去焦点时,验证其值,如果没选择有效日期,则设置为现在的日期。 |
|
allowBlank | false |
是否允许设为空,即使validateOnBlur设置true,一样有效 |
|
onSelectDate |
function(current_time ,$input){} |
|
|
onSelectTime |
function(current_time ,$input){} |
|
|
onShow |
function(current_time ,$input){} |
||
hours12 | false | 12小时制 | |
yearStart | 1950 | 可选择的最小年份 | |
yearEnd | 2050 | 可选择的最大年份 | |
roundTime | round |
针对timepicker,可选择值: round, ceil, floor |
|
dayOfWeekStart | 0 | ||
disabledDates | [] |
|
|
allowDates | [] | ||
allowDateRe | [] | 使用正则表达式 |
|
一种常用场景下的封装
在我们使用日期控件时有一种常用的场景,就是有一个开始时间和结束时间,而正常情况下开始时间不能晚于结束时间,也有一些情况下,开始时间是不能晚于今天。所以我封装了这个功能:
1 var modal = (function() { 2 var initDate = function(startDateTimeId,endDateTimeId) { 3 var startDate; 4 var endDate; 5 startDateTimeId="#"+startDateTimeId; 6 endDateTimeId="#"+endDateTimeId; 7 $(startDateTimeId).datetimepicker({ 8 format: 'Y-m-d H:m', 9 minDate: 0, 10 onChangeDateTime: function(dp, $input) { 11 startDate = $(startDateTimeId).val(); 12 }, 13 onClose: function(current_time, $input) { 14 if (startDate > endDate) { 15 $(startDateTimeId).val(endDate); 16 startDate=endDate; 17 } 18 } 19 }); 20 $(endDateTimeId).datetimepicker({ 21 format: 'Y-m-d H:m', 22 onClose: function(current_time, $input) { 23 endDate = $(endDateTimeId).val(); 24 if (startDate > endDate) { 25 $(endDateTimeId).val(startDate); 26 endDate=startDate; 27 } 28 } 29 }); 30 }; 31 return { 32 initDate: initDate 33 };34 35 })();
js
//初始化开始时间与结束时间控件 modal.initDate("startdate","enddate");
HTML
<label>开始时间:</label> <input id="startdate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" /> <label>结束时间</label> <input id="enddate" type="text" placeholder="YYYY-MM-DD HH:MM:SS" />
结束语
在网上下载的js文件,在我本地测试时是有问题的,所以我把我现在正在用的js文件上传一份在这里,如果你有需要的话可以在这里下载。