Jquery UI的datepicker插件使用

時間 2019-11-11

原文原文鏈接

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

Jquery UI是一個很是豐富的Jquery插件，並且UI的各部分插件可以獨自分離出來使用。這是其它很是多Jquery插件沒有的優點。css

近期對UI中的datepicker插件學習了一下，這款日期選擇/日曆顯示插件很是好用。廢話很少說，先來張圖。看看效果：html

<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。讓其符合咱們的使用習慣java

<span style="font-size:18px;"><script type="text/javascript">
		$( "#datepicker" ).datepicker(
			{
				showMonthAfterYear:true, //年在前，月在後
				yearSuffix:"年",	     //加入後綴年
				prevText:"上一月",       //鼠標放在翻月button上顯示的文字
				nextText:"下一月",
				monthNames:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",],      //以中文顯示月份
				//以中文顯示每週（必須按此順序。不然日期出錯）
				dayNamesMin:["日","一","二","三","四","五","六",], 
				//在文本框中顯示日期的格式 
				dateFormat:"yy-mm-dd",
			});
</script></span>

改動後的效果

對於文本框。默認是獲取焦點時顯示日期。也可以在後面加入一個buttonjquery

<span style="font-size:18px;">showOn:"button",     //在文本框後加入選擇按鈕</span>

可以爲button加入一張圖片或者改動文本，來美化buttongit

<span style="font-size:18px;">buttonText:"日期",    //設置選擇按鈕的文本
buttonImage:"css/images/animated-overlay.gif",  //爲按鈕設置圖片</span>

假設僅僅想顯示圖片，可以加入下列代碼github

<span style="font-size:18px;">//布爾值，是否將圖片顯示爲button形式，FALSE顯示button形式，TRUE單獨顯示圖片。默認是FALSE
buttonImageOnly: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>

看看效果

還可以設置選擇的年份範圍ui

<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