前端控件之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 });

　　上面传入的参数就是用来设置显示日期的格式，以及弹出层只能选择日期，而不能选择时间。那我们接下来总结一下它常用的一些参数及其作用。

 常用参数

名称默认值描述例子valuenull设置值

{value:'12.03.2013', format:'d.m.Y'}

langen

设置样式显示语言，

中文：ch\zh\zh-TW

{lang:'zh'}formatY/m/d H:i日期格式（参考网站）

{format:'Y/m/d'}

timepickertrue显示时间选择部分

{timepicker:false}

datepicker true显示日期选择部分 {datepicker:false} weeks false显示周数 {weeks:true}theme'default'皮肤样式

{theme:'dark'}

minDatefalse

设置可选择的最小日期（只有日期格式不包含时间部分才效）

{minDate:0}//今天

{minDate:'2013/12/03'}

{minDate:'-1970/01/02'}//昨天

 maxDate false  {maxDate:0}  minTimefalse 

{minTime:0}
{minTime:'12:00'}

maxTimefalse  allowTimes[]可供选择的时间点

{allowTimes:[  '09:00',  '11:00',  '12:00',  '21:00']}

maskfalse 

{mask:'9999/19/39',format:'Y/m/d'}
{mask:true,format:'Y/m/d'}

 yearOffset 0 默认年分偏移值 ｛yearOffset:1}inlinefalse是否直接显示日历控件 todayButtontrue是否显示"跳转至今天“的按钮 defaultSelecttrue

当input为空时，高亮显示现在的日期或时间

 validateOnBlurtrue

当控件失去焦点时，验证其值，如果没选择有效日期，则设置为现在的日期。

 allowBlankfalse

是否允许设为空，即使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 false12小时制 yearStart 1950可选择的最小年份 yearEnd 2050可选择的最大年份 roundTime round

针对timepicker,可选择值: round, ceil, floor

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