成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

先來看看Datepicker插件的屬性表：

第一個日歷插件的使用實例
首先導入需要的類庫文件：

<</SPAN>scripttype="text/javascript" src="http://www.gimoo.net/t/1904/${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript" src="http://www.gimoo.net/t/1904/${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></</SPAN>script>
<</SPAN>scripttype="text/javascript"src="http://www.gimoo.net/t/1904/${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></</SPAN>script>
<</SPAN>linkrel="stylesheet"type="text/css"href="http://www.gimoo.net/t/1904/${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

首先進行頁面代碼的編寫：

<</SPAN>div class="demo">
<</SPAN>p>Date:<</SPAN>input type="text" id="datepicker"></</SPAN>p>
</</SPAN>div>

然后使用js代碼對插件進行調用

效果截圖：

下面通過實例對一些常用屬性進行驗證：
1、altField ：使用備用的輸出字段，即將選擇的日期以另一種格式，輸出到另一個控件中，值為選擇符，即要輸出的控件
altFormat：altField輸出的格式
實例驗證：
頁面代碼：

<</SPAN>div class="demo">
<</SPAN>p>Date: <</SPAN>input type="text" id="datepicker">
<</SPAN>input type="text" id="alternate" size="30"/></</SPAN>p>
</</SPAN>div>

Js代碼：

$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});

效果截圖：

2、showAnim：設置日期面板顯示或隱藏的動畫名
js代碼的編寫：

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

3、showButtonPanel：是否顯示按鈕面板
Js代碼：
[javascript] view plaincopyprint?
$( "#datepicker" ).datepicker({
showButtonPanel:true
});

如圖可以看到面板下方有兩個按鈕：點擊“今天”會跳到今天的日期，點擊“關閉”會關閉面板。

4、dateFormat：指定顯示日期的格式
Js代碼：

$( "#datepicker" ).datepicker({
dateFormat:"yy/mm/dd"
});

效果截圖：

通過圖像可以看到，文本框中日期格式由以前的“yy-mm-dd”轉變成了“by/mm/dd”。當然還有別的格式，可以根據自己的喜好進行設置。
5、changeMonth：是否使用下拉列表選擇月份
changeYear：是否使用下拉列表選擇年份
在js代碼中添加此屬性：changeMonth:true 或者 changeYear:true
其中標題欄的月份或者年份會出現下拉菜單的形式：

6、yearRange：設置下拉列表框中顯示的年份范圍，可以是相對今年（-nn:+nn）或相對于選擇的年份（c-nn:c+nn）或絕對年份（nnnn:nnnn）
在js代碼中添加屬性：

$( "#datepicker" ).datepicker({
changeYear: true,
yearRange:"2011:2012"
});

效果截圖：

從圖中可以看到年的位置為下拉菜單的形式，其中下拉菜單只會出現2011與2012年的選項。
注：yearRange屬性只有在changeYear為true的情況下才使用。

7、numberOfMonths：設置一次要顯示幾個月。可以為包含兩個數字的數組，表示顯示的行數和列數
Js代碼：

$( "#datepicker" ).datepicker({
numberOfMonths: 3
});

上面指定numberOfMonths為3，那么彈出的日歷面板就會顯示當前以及以后兩個月，如圖：

8、showOn：設置觸發選擇器的事件名稱
buttonText：指定觸發按鈕上顯示的文本，showOn屬性應設置為button或both
buttonImage：指定彈出按鈕圖像的URL，若設置則buttonText將成為alt值
buttonImageOnly：是否將圖像放在控件后面，作為觸發器，如果設置為true那么按鈕將只剩下圖片作為按鈕，是頁面更加美觀
這里我編寫三個文本框進行以上屬性的對比：
1) Js代碼：

$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日歷按鈕"
});

效果截圖：

2）將按鈕設置為圖片：
Js代碼：

$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});

通過以上對比，可以理解buttonImageOnly屬性的作用。
9、minDate：可以選擇的最小日期，null表示無限制
maxDate：可以選擇的最大日期。null表示無限制
兩者都是根據以當天日期為基礎的。
Js代碼：

$(function() {
$( "#datepicker" ).datepicker({
//表示以當天為準，只有在20天之前和10天之后的日期之間的時間可以選擇
minDate: -20,
maxDate: "+10D"
});
});

如下圖在7號之前都不可選擇（當前日期為27）：

以上就是對jquery UI Datepicker時間控件的使用方法深入學習，為之后的學習打下了基礎，希望大家繼續關注jquery UI Datepicker時間控件終結篇學習。