jQueryUI中Datepicker(日曆)插件的介紹和使用

http://jqueryui.com/datepicker/

jQueryUI中Datepicker(日曆)插件的介紹和使用

Datepicker插件的屬性：

屬性	數據類型	默認值	說明
altField	String	""	使用備用的輸出字段，即將選擇的日期 以另一種格式，輸出到另一個控件中， 值爲選擇符，即要輸出的控件
altFormat	String	""	altField輸出的格式， 詳細格式見formatDate方法
appendText	String	""	指定每個日期字段後面顯示的文本
autoSize	Boolean	false	是否自動調整控件大小， 以適應當前的日期格式的輸入
buttonImage	String	""	指定彈出按鈕圖像的URL，若設置則 buttonText將成爲alt值
buttonImageOnly	Boolean	false	是否將圖像放在控件後面，作爲觸發器
buttonText	String	"..."	指定觸發按鈕上顯示的文本，showOn 屬性應設置爲button或both
changeMonth	Boolean	false	是否使用下拉列表選擇月份
changeYear	Boolean	false	是否使用下拉列表選擇年份
closeText	String	"Done"	指定關閉鏈接顯示的文本
dateFormat	String	"mm/dd/yy"	指定顯示日期的格式
defaultDate	Date String Number	null	首次打開顯示的日期，可以用Date對象 指定一個實際日期，或指定距離今天 的天數（如+7）、字符串（y表示年 、m表示月、w表示周、d表示天，如 "+1m+7d"）默認爲null，表示今天
duration	Number String	"normal"	日期選擇器呈現的速度，可以爲毫秒數
firstDay	Number	0	設置每週的第一天，0表示星期日， 1表示星期一等
maxDate	Date Number String	null	可以選擇的最大日期。null表示無限制 格式見defaultDate
minDate	Date Number String	null	可以選擇的最小日期，null表示無限制 格式見defaultDate
numberOfMonths	Number Array	1	設置一次要顯示幾個月。可以爲包含兩個 數字的數組，表示顯示的行數和列數
selectOtherMonths	Boolean	false	是否可以選擇非當前月的日期， showOtherMonths屬性必須爲true
shortYearCutoff	String Number	"+10"	設置截止的年份的值，若爲數字（0~99） 則直接使用其值，若是字符串，則轉化爲 數字並與當前年份相加。當超過截止 年份時，則被認爲是上個世紀
showAnim	String	"show"	設置顯示或隱藏的動畫名
showButtonPanel	Boolean	false	是否顯示按鈕面板
showCurrentAtPos	Number	0	指定在多月份顯示時，當前月份位於 何處，從左上方0算起
showMonthAfterYear	Boolean	false	是否在標題中的年份後顯示月份
showOn	String	"focus"	設置觸發選擇器的事件名稱
showOtherMonths	Boolean	false	是否顯示其他月份
stepMonths	Number	1	指定單擊上月下月鏈接時，移動幾個月
yearRange	String	c-10:c+10	設置下拉列表框中顯示的年份範圍， 可以是相對今年（-nn:+nn）或相對於 選擇的年份（c-nn:c+nn）或絕對年份 （nnnn:nnnn）

 

第一個日曆插件的使用實例

首先導入需要的類庫文件：

<!-- 引入相應的jquery的UI文件 -->

       <script type="text/javascript"  src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></script>

       <!-- 引入此js文件將日曆中內容轉化成中文 -->

       <script type="text/javascript"  src="${pageContext.request.contextPath }/js/jquery.ui.datepicker-zh-CN.js"></script>

       <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script>

       <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/ui-lightness/jquery-ui-1.8.18.custom.css">

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

<div class="demo">

    <p>Date:<input type="text" id="datepicker"></p>

</div>

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

：

<script type="text/javascript">

           $(function() {

              //插件的調用

              $("#datepicker").datepicker({

                  //在這裏進行插件的屬性設置

              });

           });

       </script>

效果截圖：

下面通過實例對一些常用屬性進行驗證：

1、  altField ：使用備用的輸出字段，即將選擇的日期以另一種格式，輸出到另一個控件中，值爲選擇符，即要輸出的控件

  altFormat：altField輸出的格式

實例驗證：

頁面代碼：

   

<div class="demo">

          <p>Date: <input type="text" id="datepicker">

          <input type="text" id="alternate" size="30"/></p>

      </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代碼：

$( "#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屬性的效果：

設置buttonImageOnly屬性爲true後：

通過以上對比，可以理解buttonImageOnly屬性的作用。

9、minDate：可以選擇的最小日期，null表示無限制

maxDate：可以選擇的最大日期。null表示無限制

兩者都是根據以當天日期爲基礎的。

Js代碼：

$(function() {

              $( "#datepicker" ).datepicker({

              //表示以當天爲準，只有在20天之前和10天之後的日期之間的時間可以選擇

                minDate: -20,

                maxDate: "+10D"

              });

           });

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

頂

0

踩