前端控件之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文件上傳一份在這里，如果你有需要的話可以在這里下載。