Jquery UI的datepicker插件使用方法

時間 2019-11-07

標籤 jquery datepicker 插件使用方法欄目 JQuery 简体版

原文原文鏈接

原文連接;http://www.ido321.com/375.htmljavascript

Jquery UI是一個很是豐富的Jquery插件，而且UI的各部分插件能夠獨自分離出來使用，這是其餘不少Jquery插件沒有的優點。最近對UI中的datepicker插件學習了一下，這款日期選擇/日曆顯示插件很好用。廢話很少說，先來張圖，看看效果：css

使用很簡單，上代碼：html

   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",     //在文本框後添加選擇按鈕

能夠爲按鈕添加一張圖片或者修改文本，來美化按鈕java

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

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

若是隻想顯示圖片，能夠添加下列代碼jquery

   1: //布爾值，是否將圖片顯示爲按鈕形式，FALSE顯示按鈕形式，TRUE單獨顯示圖片，默認是FALSE

   2:  buttonImageOnly:true,

還能夠自由選擇月份和年份git

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

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

效果github

不喜歡英文？ok，我們替換成數字瀏覽器

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

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

看看效果app

還能夠設置選擇的年份範圍學習

   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/s/1bnGl07t

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。