前端控件之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	设置值	{value:'12.03.2013', format:'d.m.Y'}
lang	en	设置样式显示语言， 中文：ch\zh\zh-TW	{lang:'zh'}
format	Y/m/d H:i	日期格式（参考网站）	{format:'Y/m/d'}
timepicker	true	显示时间选择部分	{timepicker:false}
datepicker	true	显示日期选择部分	{datepicker:false}
weeks	false	显示周数	{weeks:true}
theme	'default'	皮肤样式	{theme:'dark'}
minDate	false	设置可选择的最小日期（只有日期格式不包含时间部分才效）	{minDate:0}//今天 {minDate:'2013/12/03'} {minDate:'-1970/01/02'}//昨天
maxDate	false		{maxDate:0}
minTime	false		{minTime:0} {minTime:'12:00'}
maxTime	false
allowTimes	[]	可供选择的时间点	{allowTimes:[ '09:00', '11:00', '12:00', '21:00']}
mask	false		{mask:'9999/19/39',format:'Y/m/d'} {mask:true,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){}		onSelectDate:function(ct,$i){ alert(ct.dateFormat('d/m/Y'))}
onSelectTime	function(current_time ,$input){}		onSelectDate:function(ct,$i){ alert(ct.dateFormat('H:i'))}
onShow	function(current_time ,$input){}
hours12	false	12小时制
yearStart	1950	可选择的最小年份
yearEnd	2050	可选择的最大年份
roundTime	round	针对timepicker,可选择值: round, ceil, floor
dayOfWeekStart	0
disabledDates	[]		{disabledDates: ['01.01.2014','02.01.2014'] , formatDate:'d.m.Y'}
allowDates	[]
allowDateRe	[]	使用正则表达式	{format:'Y-m-d',allowDateRe: '\d{4}-(03-31|06-30|09-30|12-31)' }

 一种常用场景下的封装

　　在我们使用日期控件时有一种常用的场景，就是有一个开始时间和结束时间，而正常情况下开始时间不能晚于结束时间，也有一些情况下，开始时间是不能晚于今天。所以我封装了这个功能：

 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文件上传一份在这里，如果你有需要的话可以在这里下载。