Jquery日期、時間選擇插件

 Jquery日期、時間選擇插件

 

準備工做

首先請到jqueryui.com官網下載datepicker插件代碼，注意官網提供了整個jquery ui的全部插件下載，可是您能夠選擇其中幾個用到的插件下載，本文中只用到datepicker，因此只選擇下載jquery ui核心代碼和datepicker代碼。你能夠直接點擊本文上面的Download下載按鈕下載demo源碼包，其中就包括了datepicker插件源碼。

HTML

首先在head之間引入jquery庫文件和datepicker插件以及相關css。

 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui-datepicker.js"></script> 
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 


而後在body間加入一個輸入框。

 
<input type="text" id="date_1" /> 


Javscript

調用datepicker很是簡單，直接使用如下代碼就能夠實現：

 
$(function(){ 
    $("#date_1").datepicker(); 
}); 


這樣，單擊輸入框的時候會自動彈出一個日期選擇器，選中日期後，自動關閉選擇器，並在輸入框中顯示選中的日期。

 

 

jQuery

當輸入框得到焦點時，調用datetimepicker。

 
$('#example_1').datetimepicker(); 


若是隻須要顯示時間，則：

 
$('#example_2').timepicker(); 


定義時間格式：

 
$('#example_3').datetimepicker({ 
     showSecond: true, 
     showMillisec: true, 
     timeFormat: 'hh:mm:ss:l' 
}); 


 

 

選項及事件使用說明

datepicker提供了豐富的選項設置事件方法調用，筆者先將常常用到的相關屬性和方法整理成表格，方便查詢和使用。
 

選項	描述	默認值
altField	將選擇的日期同步到另外一個域中，配合altFormat能夠顯示不一樣格式的日期字符串。demo	''
altFormat	當設置了altField的狀況下，顯示在另外一個域中的日期格式。	''
appendText	在日期插件的所屬域後面添加指定的字符串。	''
buttonImage	設置能夠用來點擊彈出日曆的按鈕圖片，若是非空，則按鈕的文本將成爲alt屬性，不直接顯示。demo	''
buttonImageOnly	設置爲true時，圖片將做爲按鈕能夠點擊觸發彈出日曆	false
buttonText	設置觸發按鈕的文本內容。	...
changeMonth	設置是否容許經過下拉框列表選取月份。	false
changeYear	設置是否容許經過下拉框列表選取年份。	false
closeText	設置關閉按鈕的文本內容，此按鈕須要經過showButtonPanel參數的設置才顯示。	'Done'
constrainInput	若是設置爲true，則約束當前輸入的日期格式。	true
currentText	設置當天按鈕的文本內容，此按鈕須要經過showButtonPanel參數的設置才顯示。	'Today'
dateFormat	設置日期字符串的顯示格式。demo	'mm/dd/yy'
dayNames	設置一星期中天天的名稱，從星期天開始。此內容用於dateFormat時顯示，以及日曆中當鼠標移至行頭時顯示。	['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
dayNamesMin	設置一星期中天天的縮語，從星期天開始，此內容用於dateFormat時顯示，之前日曆中的行頭顯示。	['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
dayNamesShort	設置一星期中天天的縮語，從星期天開始，此內容用於dateFormat時顯示，之前日曆中的行頭顯示。	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
defaultDate	設置默認加載完後第一次顯示時選中的日期。能夠是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'表明年, 'm'表明月, 'w'表明周, 'd'表明日, 例如：'+1m +7d')。	null
duration	設置日期控件展開動畫的顯示時間，可選是"slow", "normal", "fast"，''表明馬上，數字表明毫秒數。	'normal'
firstDay	設置一週中的第一天。星期天爲0，星期一爲1，以此類推。	0
gotoCurrent	若是設置爲true，則點擊當天按鈕時，將移至當前已選中的日期，而不是今天。	false
hideIfNoPrevNext	設置當沒有上一個/下一個可選擇的狀況下，隱藏掉相應的按鈕。	false
isRTL	若是設置爲true，則全部文字是從右自左。	false
maxDate	設置一個最大的可選日期。能夠是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'表明年, 'm'表明月, 'w'表明周, 'd'表明日, 例如：'+1m +7d')。demo	null
minDate	設置一個最小的可選日期。能夠是Date對象，或者是數字（從今天算起，例如+7），或者有效的字符串('y'表明年, 'm'表明月, 'w'表明周, 'd'表明日, 例如：'+1m +7d')。	null
monthNames	設置全部月份的名稱。	['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
monthNamesShort	設置全部月份的縮寫。	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
navigationAsDateFormat	若是設置爲true，則formatDate函數將應用到 prevText,nextText和currentText的值中顯示，例如顯示爲月份名稱。	false
nextText	設置「下個月」連接的顯示文字。	'Next'
numberOfMonths	設置一次要顯示多少個月份。若是爲整數則是顯示月份的數量，若是是數組，則是顯示的行與列的數量。demo	1
prevText	設置「上個月」連接的顯示文字。	'Prev'
shortYearCutoff	設置截止年份的值。若是是（0-99）的數字則以當前年份開始算起，若是爲字符串，則相應的轉爲數字後再與當前年份相加。當超過截止年份時，則被認爲是上個世紀。	'+10'
showAnim	設置顯示、隱藏日期插件的動畫的名稱。	'show'
showButtonPanel	設置是否在面板上顯示相關的按鈕。	false
showCurrentAtPos	設置當多月份顯示的狀況下，當前月份顯示的位置。自頂部/左邊開始第x位。	0
showMonthAfterYear	是否在面板的頭部年份後面顯示月份。	false
showOn	設置什麼事件觸發顯示日期插件的面板，可選值：focus, button, both	'focus'
showOptions	若是使用showAnim來顯示動畫效果的話，能夠經過此參數來增長一些附加的參數設置。	{}
showOtherMonths	是否在當前面板顯示上、下兩個月的一些日期數（不可選）。	false
stepMonths	當點擊上/下一月時，一次翻幾個月。	1
yearRange	控制年份的下拉列表中顯示的年份數量，能夠是相對當前年(-nn:+nn)，也能夠是絕對值 (-nnnn:+nnnn)	'-10:+10'
beforeShow	在日期控件顯示面板以前，觸發此事件，並返回當前觸發事件的控件的實例對象。	function(input)
beforeShowDay	在日期控件顯示面板以前，每一個面板上的日期綁定時都觸發此事件，參數爲觸發事件的日期。調用函數後，必須返回一個數組：[0]此日期是否可選(true/false)，[1]此日期的CSS樣式名稱(""表示默認)，[2]當鼠標移至上面出現一段提示的內容。	function(date)
onChangeMonthYear	當年份或月份改變時觸發此事件，參數爲改變後的年份月份和當前日期插件的實例。	function(year, month, inst)
onClose	當日期面板關閉後觸發此事件（不管是否有選擇日期），參數爲選擇的日期和當前日期插件的實例。demo	function(dateText, inst)
onSelect	當在日期面板選中一個日期後觸發此事件，參數爲選擇的日期和當前日期插件的實例。	function(dateText, inst)