標籤：jquery ui datepicker jquery外掛程式 javascript
原文連結;http://www.ido321.com/375.html
Jquery UI是一個非常豐富的Jquery外掛程式，並且UI的各部分外掛程式可以獨自分離出來使用，這是其他很多Jquery外掛程式沒有的優勢。最近對UI中的datepicker外掛程式學習了一下，這款日期選擇/日曆顯示外掛程式很好用。廢話不多說，先來張圖，看看效果：
<span style="font-size:18px;"><!DOCTYPE><html><head><title>日曆控制項</title><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script src="js/calendar.js"></script><link rel="stylesheet" href="css/calendar.css" /><meta charset="utf-8"/></head><body><!-- height 332 width 385 --><div id="datepicker"></div> <script type="text/javascript">$( "#datepicker" ).datepicker();</script></body></html></span>
<!--文字框擷取焦點顯示日曆需要匯入的js檔案 --><script src="js/custom.min.js"></script>
把div部分修改如下：
日期選擇：<input type='text' id='datepicker'/>
這種顯然不太符合我們的習慣，需要修改js，讓其符合我們的使用習慣
<span style="font-size:18px;"><script type="text/javascript">$( "#datepicker" ).datepicker({showMonthAfterYear:true, //年在前，月在後yearSuffix:"年", //添加尾碼年prevText:"上一月", //滑鼠放在翻月按鈕上顯示的文字nextText:"下一月",monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",], //以中文顯示月份//以中文顯示每周（必須按此順序，否則日期出錯）dayNamesMin:["日","一","二","三","四","五","六",], //在文字框中顯示日期的格式 dateFormat:"yy-mm-dd",});</script></span>
對於文字框，預設是擷取焦點時顯示日期，也可以在後面添加一個按鈕
<span style="font-size:18px;">showOn:"button", //在文字框後添加選擇按鈕</span>
可以為按鈕添加一張圖片或者修改文本，來美化按鈕
<span style="font-size:18px;">buttonText:"日期", //設定選擇按鈕的文本buttonImage:"css/images/animated-overlay.gif", //為按鈕設定圖片</span>
如果只想顯示圖片，可以添加下列代碼
<span style="font-size:18px;">//布爾值，是否將圖片顯示為按鈕形式，FALSE顯示按鈕形式，TRUE單獨顯示圖片，預設是FALSEbuttonImageOnly:true, </span>
還可以自由選擇月份和年份
<span style="font-size:18px;">changeYear:true, //布爾值，是否可以選擇年份changeMonth:true, //布爾值，是否可以選擇月份</span>
不喜歡英文？ok，咱們替換成數字
<span style="font-size:18px;">//changeMonth為TRUE時，月份的縮寫monthNamesShort:["01","02","03","04","05","06","07","08","09","10","11","12"],</span>看看效果
還可以設定選擇的年份範圍
<span style="font-size:18px;">//在changeYear為true時，設定年份範圍，c表示當前年份，加減10表示當前年份推後10年和推前10年yearRange: "c-10:c+10", </span>
<span style="font-size:18px;">showButtonPanel:true, //是否顯示面板</span>
對於不喜歡英文的孩子，可以換成中文
<span style="font-size:18px;">// 設定面板上返回當前日的文字，只有showButtonPanel: true才會顯示出來currentText:"今天", // 設定面板上關閉面板的文字，只有showButtonPanel: true才會顯示出來 closeText: "關閉", </span>
這些也是我們經常要用到的吧,如果還需要什麼功能,可以自己修改js。我已經將上述代碼和從ui抽離出來的datepicker打包，可以直接應用你的項目中。如果你有需要，可以從下面給出的連結下載：
Fork Git :https://github.com/dwqs/datepicker
CSDN :http://download.csdn.net/detail/u011043843/7809973
百度云：http://pan.baidu.com/s/1bnGl07t
Jquery UI的datepicker外掛程式使用方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
