Jquery UI的datepicker外掛程式使用方法

最後更新：2014-08-24 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：des style blog http color java os 使用 io

原文連結;http://www.ido321.com/375.html

Jquery UI是一個非常豐富的Jquery外掛程式，並且UI的各部分外掛程式可以獨自分離出來使用，這是其他很多Jquery外掛程式沒有的優勢。最近對UI中的datepicker外掛程式學習了一下，這款日期選擇/日曆顯示外掛程式很好用。廢話不多說，先來張圖，看看效果：

使用很簡單，上代碼：

   1: <!DOCTYPE>

   2: <html>

   3: <head>

   4: <title>日曆控制項</title>

   5: <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

   6: <script src="js/calendar.js"></script>

   7: <link rel="stylesheet" href="css/calendar.css" />

   8: <meta charset="utf-8"/>

   9: </head>

  10: <body>

  11:    <div id="datepicker">

12:

  13:    </div>

  14:    <script type="text/javascript">

  15:        $( "#datepicker" ).datepicker();

  16:    </script>

  17: </body>

  18: </html>

也可以再文字框擷取焦點時顯示,稍作修改:

   1: <!--文字框擷取焦點顯示日曆需要匯入的js檔案 -->

   2: <script src="js/custom.min.js"></script>

把div部分修改如下：

   1: 日期選擇：<input type=‘text‘ id=‘datepicker‘/>

其他不變，重新整理瀏覽器，效果

這種顯然不太符合我們的習慣，需要修改js，讓其符合我們的使用習慣

   1: <script type="text/javascript">

   2:         $( "#datepicker" ).datepicker(

   3:             {

   4:                showMonthAfterYear:true, //年在前，月在後

   5:                 yearSuffix:"年",         //添加尾碼年

   6:                 prevText:"上一月",       //滑鼠放在翻月按鈕上顯示的文字

   7:                 nextText:"下一月",

   8:                 monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],      //以中文顯示月份

   9:                 //以中文顯示每周（必須按此順序，否則日期出錯）

  10:                 dayNamesMin:["日","一","二","三","四","五","六",],

  11:                 //在文字框中顯示日期的格式

  12:                 dateFormat:"yy-mm-dd",

  13:                });

  14:     </script>

修改後的效果對於文字框，預設是擷取焦點時顯示日期，也可以在後面添加一個按鈕

   1: showOn:"button",     //在文字框後添加選擇按鈕

可以為按鈕添加一張圖片或者修改文本，來美化按鈕

   1: buttonText:"日期",    //設定選擇按鈕的文

   2: buttonImage:"css/images/animated-overlay.gif",  //為按鈕設定圖片

如果只想顯示圖片，可以添加下列代碼

   1: //布爾值，是否將圖片顯示為按鈕形式，FALSE顯示按鈕形式，TRUE單獨顯示圖片，預設是FALSE

   2:  buttonImageOnly:true,

還可以自由選擇月份和年份

   1: changeYear:true,  //布爾值，是否可以選擇年份

   2: changeMonth:true, //布爾值，是否可以選擇月份

效果

不喜歡英文？ok，咱們替換成數字

   1: //changeMonth為TRUE時，月份的縮寫

   2: monthNamesShort:["01","02","03","04","05","06","07","08","09","10","11","12"],

看看效果

還可以設定選擇的年份範圍

   1: //在changeYear為true時，設定年份範圍，c表示當前年份，加減10表示當前年份推後10年和推前10年

   2: yearRange: "c-10:c+10",

當然，還可以添加面板

   1: showButtonPanel:true,   //是否顯示面板

對於不喜歡英文的孩子，可以換成中文

   1: // 設定面板上返回當前日的文字，只有showButtonPanel: true才會顯示出來

   2:   currentText:"今天",

   3:  // 設定面板上關閉面板的文字，只有showButtonPanel: true才會顯示出來

   4:  closeText: "關閉",

這些也是我們經常要用到的吧,如果還需要什麼功能,可以自己修改js。我已經將上述代碼和從ui抽離出來的datepicker打包，可以直接應用你的項目中。如果你有需要，可以從下面給出的連結下載：

Fork Git :https://github.com/dwqs/datepicker

CSDN :http://download.csdn.net/detail/u011043843/7809973

百度云：http://pan.baidu.com/disk/home#path=%252Fthemes

Jquery UI的datepicker外掛程式使用方法

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Jquery UI的datepicker外掛程式使用方法

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support