jquery ui(五)日期選擇器 datepicker
JQuery官方的Datepicker控件,可以很方便的使用,可以讓用戶很方便的在輸入框上選擇時間。
廢話少說,現(xiàn)在進(jìn)入正題
一、國際慣例,先上實(shí)例
1、代碼
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
Date:<input id="datepicker" type="text"/>
2、效果
jquery-ui-datepicker截圖–ifxoxo.com
二、具體用法
1、需要加載文件
(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet"/>
2、頁面上的HTML代碼
需要一個用來加載datepicker控件的輸入框
<input id="date" type="text"/>
3、js代碼
最簡單的初始化函數(shù):
$(.selecter).datepicker()
4、datepicker()的參數(shù)
datepicker非常強(qiáng)大,所以也提供了很多使用的參數(shù),先看一個復(fù)雜一點(diǎn)的例子,然后再介紹參數(shù)。
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker({
changeMonth:true,//月份下拉列表
changeYear:true,//月份下拉列表
minDate:"-5d",//可選最小日期
maxDate:"+10d",//可選最大日期
showOn:"both",//點(diǎn)擊圖片和輸入框都彈出面板
buttonImage:"calendar.gif",
buttonImageOnly:true,
showButtonPanel:true,//顯示面板底部按鈕
closeTextType:"close",//關(guān)閉按鈕文字
currentText:"today",//返回今天按鈕文字
dateFormat:"yy-mm-dd",
dayNamesMin:['Sun','Mo','Tu','We','Th','Fr','Sa'],
beforeShow:function(event, ui){//打開窗口之前
alert('this is from ifxoxo.com');
}//其他參數(shù)詳見下面
});
});
</script>
效果如下(灰色部分表示不能選擇)
jquery-ui-datepicker 一個復(fù)雜的例子–ifxoxo.com
因?yàn)閰?shù)較多,把所有參數(shù)根據(jù)功能分成幾組進(jìn)行闡述
(1)、動畫
duration | ‘normal’ | 設(shè)置日期控件展開動畫的顯示時間,可選是
“slow”, “normal”, “fast”,”代表立刻,數(shù)字代表毫秒數(shù)。 |
showAnim | ‘show’ | 設(shè)置顯示、隱藏日期插件的動畫的名稱。 |
showOptions | {} | 如果使用showAnim來顯示動畫效果的話,可以通過此參數(shù)來增加一些附加的參數(shù)設(shè)置。 |
(2)、圖片按鈕
buttonImage | “” | 設(shè)置彈出按鈕的圖片,如果非空,則按鈕的文本將成為alt屬性,不直接顯示。 |
buttonImageOnly | false | 是否把按鈕安全顯示成圖片的樣子 |
buttonText | “…” | 設(shè)置觸發(fā)按鈕的文本內(nèi)容。 |
showOn | ‘focus’ | 設(shè)置什么事件觸發(fā)顯示日期插件的面板,可選值:
focus, button, both(當(dāng)為focus時,不顯示圖片按鈕) |
(3)、選中之后時間格式
dateFormat | mm/dd/yy | 設(shè)置日期字符串的顯示格式。 |
dayNames | ['Sunday', 'Monday',
'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | 設(shè)置一星期中每天的名稱,從星期天開始。此內(nèi)容用于dateFormat時顯示,以及日歷中當(dāng)鼠標(biāo)移至行頭時顯示。 |
dayNamesMin | ['Su', 'Mo', 'Tu',
'We', 'Th', 'Fr', 'Sa'] | 設(shè)置一星期中每天的縮語,從星期天開始,此內(nèi)容用于dateFormat時顯示,以前日歷中的行頭顯示 |
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)天按鈕時,
將移至當(dāng)前已選中的日期,而不是今天 |
(5)、可選中的時間范圍
maxDate | false | 設(shè)置一個最大的可選日期。可以是Date對象,
或者是數(shù)字(從今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
minDate | false | 設(shè)置一個最小的可選日期??梢允荄ate對象,
或者是數(shù)字(從今天算起,例如+7), 或者有效的字符串(‘y’代表年, ‘m’代表月, ‘w’代表周, ‘d’代表日, 例如:’+1m +7d’)。 |
yearRange | -10:+10 | 控制年份的下拉列表中顯示的年份數(shù)量,可以是
(-nn:+nn),也可以是絕對值 (-nnnn:+nnnn) |
shortYearCutoff | ‘+10′ | 設(shè)置截止年份的值。
如果是(0-99)的數(shù)字則以當(dāng)前年份開始算起, 當(dāng)超過截止年份時,則被認(rèn)為是上個世紀(jì) |
(6)、面板中上一月 下一月按鈕控制
hideIfNoPrevNext | false | 設(shè)置當(dāng)沒有上一個/下一個可選擇的情況下,
隱藏掉相應(yīng)的按鈕。(默認(rèn)為不可用) |
nextText | ‘Next’ | 設(shè)置“下個月”鏈接的顯示文字 |
prevText | ‘Prev’ | 設(shè)置“上個月”鏈接的顯示文字。 |
stepMonths | 1 | 當(dāng)點(diǎn)擊上/下一月時,一次翻幾個月。 |
(7)、面板其他顯示參數(shù)
firstDay | 0 | 設(shè)置一周中的第一天。星期天為0,星期一為1,以此類推。 |
defaultDate | null | 設(shè)置默認(rèn)加載完后第一次顯示時選中的日期。
可以是Date對象, 或者是數(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è)置一次要顯示多少個月份。
如果為整數(shù)則是顯示月份的數(shù)量, 如果是數(shù)組[2, 3],則是顯示的行與列的數(shù)量。 |
showCurrentAtPos | 0 | 設(shè)置當(dāng)多月份顯示的情況下,當(dāng)前月份顯示的位置。自頂部/左邊開始第x位。 |
showMonthAfterYear | false | 是否在面板的頭部年份后面顯示月份。 |
showOtherMonths | false | 是否在當(dāng)前面板顯示上、下兩個月的一些日期數(shù)(不可選)。 |
isRTL | false | 如果設(shè)置為true,則所有文字是從右自左。 |
appendText | null | 在日期插件的所屬域后面添加指定的字符串 |
(8)、同步顯示到其他input
altField | null | 將選擇的日期同步到另一個input中,
配合altFormat可以顯示不同格式的日期字符串。 |
altFormat | ” | 當(dāng)設(shè)置了altField的情況下,顯示在另一個input中的日期格式。 |
5、datepicker的方法和事件
(1)create 加載的時候此事件將被觸發(fā)function(event, ui)
(2)beforeShow 展示之前此事件將被觸發(fā) function(event, ui)
(3)beforeShowDay 展示日期之前事件將被觸發(fā) function(date)
(4)onChangeMonthYear 月份或者年份的時候此事件將被觸發(fā)function(year, month, ui)
(5)onClose 關(guān)閉的時候此事件將被觸發(fā) function(dateText, ui)
(6)onSelect 選中的時候此事件將被觸發(fā)function(dateText, ui)
$('.selector').datepicker({
beforeShow:function(event, ui){ alert4'has create!!');}
});
6、方法
(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 返回這個element .datepicker( “widget” )
(7)getDate 獲取date .datepicker( “date” )
(8)setDate 設(shè)置date .datepicker( “setDate”, date )
//設(shè)置日期
$(".selector").datepicker("setDate",'+1m +7d');
三、其他jquery-ui文章
1、jquery ui(一)簡介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)彈出窗口 dialog
4、jquery ui(四)進(jìn)度條 progressbar
5、jquery ui(五)日期選擇器 datepicker