JQuery官方的Datepicker控件，可以很方便的使用，可以讓用戶很方便的在輸入框上選擇時(shí)間。
【調(diào)用代碼】<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker"></p>
【效果圖】
下面介紹一下具體用法：
一、需要加載的js文件
(1)jquery.js
(2)jquery.ui.core.js
(3)jquery.ui.widget.js
(4)jquery.ui.datepicker.js
二、html代碼
需要一個(gè)用來加載datepicker控件的輸入框。
<input id = "date" type="text"/>
三、js代碼
初始化函數(shù)：
$(.selecter).datepicker();
【參數(shù)】
因?yàn)閰?shù)較多，把所有參數(shù)根據(jù)功能分成幾組進(jìn)行闡述
1、動(dòng)畫
| duration | 'normal' | 設(shè)置日期控件展開動(dòng)畫的顯示時(shí)間，可選是:
"slow", "normal", "fast"，''代表立刻，數(shù)字代表毫秒數(shù)。 |
| showAnim | 'show' | 設(shè)置顯示、隱藏日期插件的動(dòng)畫的名稱。 |
| showOptions | {} | 如果使用showAnim來顯示動(dòng)畫效果的話，可以通過此參數(shù)來增加一些附加的參數(shù)設(shè)置。 |
2、圖片按鈕
| buttonImage | "" | 設(shè)置彈出按鈕的圖片，如果非空，則按鈕的文本將成為alt屬性，不直接顯示。 |
| buttonImageOnly | false | 是否把按鈕安全顯示成圖片的樣子 |
| buttonText | "..." | 設(shè)置觸發(fā)按鈕的文本內(nèi)容。 |
| showOn | 'focus' | 設(shè)置什么事件觸發(fā)顯示日期插件的面板，可選值：
focus, button, both(當(dāng)為focus時(shí)，不顯示圖片按鈕) |
3、選中之后時(shí)間格式
| dateFormat | mm/dd/yy | 設(shè)置日期字符串的顯示格式。 |
| dayNames | ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'] | 設(shè)置一星期中每天的名稱，從星期天開始。此內(nèi)容用于dateFormat時(shí)顯示，以及日歷中當(dāng)鼠標(biāo)移至行頭時(shí)顯示。 |
| dayNamesMin | ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] | 設(shè)置一星期中每天的縮語，從星期天開始，此內(nèi)容用于dateFormat時(shí)顯示，以前日歷中的行頭顯示 |
| dayNamesShort | ['Sun', 'Mon', 'Tue','Wed', 'Thu', 'Fri', 'Sat'] | 設(shè)置一星期中每天的縮語，從星期天開始， |
| navigationAsDateFormat | false | 如果設(shè)置為true，則formatDate函數(shù)將應(yīng)用到 prevText,nextText和currentText的值中顯示，例如顯示為月份名稱。 |
| constrainInput | true | 如果設(shè)置為true，則約束當(dāng)前輸入的日期格式。 |
4、面板底部的按鈕控制
| showButtonPanel | false | 設(shè)置是否在面板上顯示相關(guān)的按鈕 |
| closeTextType | "done" | 設(shè)置關(guān)閉按鈕的文本內(nèi)容 |
| currentText | "today" | 設(shè)置當(dāng)天按鈕的文本內(nèi)容 |
| gotoCurrent | false | 如果設(shè)置為true，則點(diǎn)擊當(dāng)天按鈕時(shí)， |
| | | 將移至當(dāng)前已選中的日期，而不是今天 |
5、可選中的時(shí)間范圍
| maxDate | false | 設(shè)置一個(gè)最大的可選日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+7），或者有效的字符串('y'代表年， 'm'代表月， 'w'代表周， 'd'代表日。 例如：'+1m +7d')。 |
| minDate | false | 設(shè)置一個(gè)最小的可選日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+7），或者有效的字符串('y'代表年， 'm'代表月，'w'代表周, 'd'代表日, 例如：'+1m +7d')。 |
| yearRange | -10:+10 | 控制年份的下拉列表中顯示的年份數(shù)量，可以是
(-nn:+nn)，也可以是絕對(duì)值 (-nnnn:+nnnn) |
| shortYearCutoff | '+10' | 設(shè)置截止年份的值。
如果是（0-99）的數(shù)字則以當(dāng)前年份開始算起，當(dāng)超過截止年份時(shí)，則被認(rèn)為是上個(gè)世紀(jì) |
6、面板中上一月 下一月按鈕控制
| hideIfNoPrevNext | false | 設(shè)置當(dāng)沒有上一個(gè)/下一個(gè)可選擇的情況下， |
| 隱藏掉相應(yīng)的按鈕。（默認(rèn)為不可用） |
| nextText | 'Next' | 設(shè)置“下個(gè)月”鏈接的顯示文字 |
| prevText | 'Prev' | 設(shè)置“上個(gè)月”鏈接的顯示文字。 |
| stepMonths | 1 | 當(dāng)點(diǎn)擊上/下一月時(shí)，一次翻幾個(gè)月。 |
7、面板其他顯示參數(shù)
| firstDay | 0 | 設(shè)置一周中的第一天。星期天為0，星期一為1，以此類推。 |
| defaultDate | null | 設(shè)置默認(rèn)加載完后第一次顯示時(shí)選中的日期。可以是Date對(duì)象，或者是數(shù)字（從今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。 |
| changeMonth | false | 設(shè)置允許通過下拉框列表選取月份。 |
| changeYear | false | 設(shè)置允許通過下拉框列表選取年份。 |
| monthNames | ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August','September', 'October', 'November', 'December'] | 設(shè)置所有月份的名稱 |
| monthNamesShort | ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep','Oct', 'Nov', 'Dec'] | 設(shè)置所有月份的縮寫。
(具體展現(xiàn)在下拉列表changeMonth) |
| numberOfMonths | 1 | 設(shè)置一次要顯示多少個(gè)月份。
如果為整數(shù)則是顯示月份的數(shù)量，如果是數(shù)組[2, 3]，則是顯示的行與列的數(shù)量。 |
| showCurrentAtPos | 0 | 設(shè)置當(dāng)多月份顯示的情況下，當(dāng)前月份顯示的位置。自頂部/左邊開始第x位。 |
| showMonthAfterYear | false | 是否在面板的頭部年份后面顯示月份。 |
| showOtherMonths | false | 是否在當(dāng)前面板顯示上、下兩個(gè)月的一些日期數(shù)（不可選）。 |
| isRTL | false | 如果設(shè)置為true，則所有文字是從右自左。 |
| appendText | null | 在日期插件的所屬域后面添加指定的字符串 |
8、同步顯示到其他input
| altField | null | 將選擇的日期同步到另一個(gè)input中，配合altFormat可以顯示不同格式的日期字符串。 |
| altFormat | '' | 當(dāng)設(shè)置了altField的情況下，顯示在另一個(gè)input中的日期格式。 |
四、其他1、事件
（1）create 加載的時(shí)候此事件將被觸發(fā)function(event, ui)
（2）beforeShow 展示之前此事件將被觸發(fā) function(event, ui)
（3）beforeShowDay 展示日期之前事件將被觸發(fā) function(date)
（4）onChangeMonthYear 月份或者年份的時(shí)候此事件將被觸發(fā)function(year, month, ui)
（5）onClose 關(guān)閉的時(shí)候此事件將被觸發(fā) function(dateText, ui)
（6）onSelect 選中的時(shí)候此事件將被觸發(fā)function(dateText, ui)
【示例】
$('.selector').datepicker({
create: function(event, ui) { alert('has create!!'); }
});
2、方法
(1)destory 銷毀 .datepicker( "destroy" )
(2)disable 不可用 .datepicker( "disable" )
(3)enable 可用 .datepicker( "enable" )
(4)option 獲取參數(shù) .datepicker( "option", optionName )
(5)option 設(shè)置參數(shù) .datepicker( "option" , optionName , [value] )
(6)widget 返回這個(gè)element .datepicker( "widget" )
(7)getDate獲取date .datepicker( "date" )
(8)setDate設(shè)置date .datepicker( "setDate", date )
【示例】
//設(shè)置進(jìn)度條新值
$("#divProgressbar").datepicker( "setDate", '+1m +7d');