atepicker插件的屬性：
| 屬性 | 數據類型 | 默認值 | 說明 | |
| altField | string | "" | 使用備用的輸出字段，即將選擇的日期 以另一種格式，輸出到另一個控件中， 值為選擇符，即要輸出的控件 |
|
| altFormat | string | "" | altField輸出的格式， 詳細格式見formatDate方法 |
|
| appendText | string | "" | 指定每個日期字段后面顯示的文本 | |
| autoSize | boolean | false | 是否自動調整控件大小， 以適應當前的日期格式的輸入 |
|
| buttonImage | string | "" | 指定彈出按鈕圖像的URL，若設置則 buttonText將成為alt值 |
|
| buttonImageOnly | boolean | false | 是否將圖像放在控件后面，作為觸發器 | |
| buttonText | string | "……" |
|
|
| changeMonth | string | "" |
|
|
| changeYear | string | "" | 是否 下拉列表選擇年份 | |
| closeText | string | "Done" | 指定關閉鏈接顯示的文本 |
第一個日歷插件的使用實例
需要引入的外部文件有：
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.css" rel="stylesheet"> <script src="jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
代碼：
<p>日期：<input type="text" id="datepicker" size="30"></p>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
運行圖：
通過實例對一些常用屬性進行驗證：
1、 altField ：使用備用的輸出字段，即將選擇的日期以另一種格式，輸出到另一個控件中，值為選擇符，即要輸出的控件
altFormat：altField輸出的格式
代碼：
<p>日期：
<input type="text" id="datepicker" size="30">
<input type="text" id="alternate" size="30">
</p>
<script>
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
</script>
運行結果：
2、showAnim ：設置日期面板顯示或隱藏的動畫名
<p>日期：<input type="text" id="datepicker" size="30"></p>
<p>動畫：<br>
<select id="anim">
<option value="show">Show (默認)</option>
<option value="slideDown">滑下</option>
<option value="fadeIn">淡入</option>
<option value="blind">Blind (UI 百葉窗特效)</option>
<option value="bounce">Bounce (UI 反彈特效)</option>
<option value="clip">Clip (UI 剪輯特效)</option>
<option value="drop">Drop (UI 降落特效)</option>
<option value="fold">Fold (UI 折疊特效)</option>
<option value="slide">Slide (UI 滑動特效)</option>
<option value="">無</option>
</select>
</p>
//js代碼
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
3、showButtonPanel：是否顯示按鈕面板
js代碼：
<script>
$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel:true
})
})
運行效果：
4、dateFormat：指定顯示日期的格式
//js代碼
<script>
$(function() {
$( "#datepicker" ).datepicker({
dateFormat:"yy/mm/dd"
})
})
5、showOn：設置觸發選擇器的事件名稱
buttonText：指定觸發按鈕上顯示的文本，showOn屬性應設置為button或both
buttonImage：指定彈出按鈕圖像的URL，若設置則buttonText將成為alt值
buttonImageOnly：是否將圖像放在控件后面，作為觸發器，如果設置為true那么按鈕將只剩下圖片作為按鈕，是頁面更加美觀
1）、
$( "#datepicker2" ).datepicker({
showOn: "both",
buttonText:"日歷按鈕"
});
2）、將按鈕設置為圖片：
$( "#datepicker2" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
6、 minDate：可以選擇的最小日期，null表示無限制
maxDate：可以選擇的最大日期。null表示無限制
兩者都是根據以當天日期為基礎的。
$( "#datepicker2" ).datepicker({
//表示以當天為准，只有在20天之前和10天之后的日期之間的時間可以選擇
minDate: -20,
maxDate: "+10D"
});
更多日歷插件demo在官網了解http://api.jqueryui.com/datepicker