jQuery 日期選擇器插件詳解.doc

JQuery官方地址：/你可以在這里下載到JQuery的核心框架的最新版本，包括未壓縮的和已壓縮的，不壓縮的話有98K，簡裝壓縮版只有15KDatepicker的演示地址：/repository/latest/demos/functional/#ui.datepicker包括自定義格式，資源本地化等，都有相應的源代碼。Datepicker的下載地址：/download_builder/包括UI系列組件的下載地址，你可以在左邊選擇不同版本以及是否壓縮，以何種方式壓縮。這個頁面的好處在于，你可以完全訂制自己的腳本，本例中我們只需要Datepicker，所以只下載這一個和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可，它是所有UI插件的核心，不能不下。我是把它們兩個分開下載的。78K的Datepicker壓縮后只有23K。Datepicker的皮膚(CSS):/pages/code/jquery-ui-datepicker演示頁面：/article/jquery-ui-datepicker-themes給個圖：OK，接下來堆代碼：JQuery官方地址：/你可以在這里下載到JQuery的核心框架的最新版本，包括未壓縮的和已壓縮的，不壓縮的話有98K，簡裝壓縮版只有15KDatepicker的演示地址：/repository/latest/demos/functional/#ui.datepicker包括自定義格式，資源本地化等，都有相應的源代碼。Datepicker的下載地址：/download_builder/包括UI系列組件的下載地址，你可以在左邊選擇不同版本以及是否壓縮，以何種方式壓縮。這個頁面的好處在于，你可以完全訂制自己的腳本，本例中我們只需要Datepicker，所以只下載這一個和最上面的UI Core(The core of jQuery UI, required for all interaction modules and widgets)即可，它是所有UI插件的核心，不能不下。我是把它們兩個分開下載的。78K的Datepicker壓縮后只有23K。Datepicker的皮膚(CSS):/pages/code/jquery-ui-datepicker演示頁面：/article/jquery-ui-datepicker-themes給個圖：OK，接下來堆代碼：然后在head節(jié)中加入：在body節(jié)中加入 $(document).ready(function() $(#).datepicker($.extend(, $.datepicker.regionalzh-CN, showStatus: true, showOn: both, buttonImage: /images/small/calendar.gif, buttonImageOnly: true ); );jQueryUI中Datepicker(日歷)插件的介紹和使用Datepicker插件的屬性：屬性數(shù)據(jù)類型默認值說明altFieldString使用備用的輸出字段，即將選擇的日期以另一種格式，輸出到另一個控件中，值為選擇符，即要輸出的控件altFormatStringaltField輸出的格式，詳細格式見formatDate方法appendTextString指定每個日期字段后面顯示的文本autoSizeBooleanfalse是否自動調(diào)整控件大小，以適應當前的日期格式的輸入buttonImageString指定彈出按鈕圖像的URL，若設置則buttonText將成為alt值buttonImageOnlyBooleanfalse是否將圖像放在控件后面，作為觸發(fā)器buttonTextString.指定觸發(fā)按鈕上顯示的文本，showOn屬性應設置為button或bothchangeMonthBooleanfalse是否使用下拉列表選擇月份changeYearBooleanfalse是否使用下拉列表選擇年份closeTextStringDone指定關閉鏈接顯示的文本dateFormatStringmm/dd/yy指定顯示日期的格式defaultDateDateStringNumbernull首次打開顯示的日期，可以用Date對象指定一個實際日期，或指定距離今天的天數(shù)（如+7）、字符串（y表示年、m表示月、w表示周、d表示天，如+1m+7d）默認為null，表示今天durationNumberStringnormal日期選擇器呈現(xiàn)的速度，可以為毫秒數(shù)firstDayNumber0設置每周的第一天，0表示星期日，1表示星期一等maxDateDateNumberStringnull可以選擇的最大日期。null表示無限制格式見defaultDateminDateDateNumberStringnull可以選擇的最小日期，null表示無限制格式見defaultDatenumberOfMonthsNumberArray1設置一次要顯示幾個月?？梢詾榘瑑蓚€數(shù)字的數(shù)組，表示顯示的行數(shù)和列數(shù)selectOtherMonthsBooleanfalse是否可以選擇非當前月的日期，showOtherMonths屬性必須為trueshortYearCutoffStringNumber+10設置截止的年份的值，若為數(shù)字（099）則直接使用其值，若是字符串，則轉(zhuǎn)化為數(shù)字并與當前年份相加。當超過截止年份時，則被認為是上個世紀showAnimStringshow設置顯示或隱藏的動畫名showButtonPanelBooleanfalse是否顯示按鈕面板showCurrentAtPosNumber0指定在多月份顯示時，當前月份位于何處，從左上方0算起showMonthAfterYearBooleanfalse是否在標題中的年份后顯示月份showOnStringfocus設置觸發(fā)選擇器的事件名稱showOtherMonthsBooleanfalse是否顯示其他月份stepMonthsNumber1指定單擊上月下月鏈接時，移動幾個月yearRangeStringc-10:c+10設置下拉列表框中顯示的年份范圍，可以是相對今年（-nn:+nn）或相對于選擇的年份（c-nn:c+nn）或絕對年份（nnnn:nnnn）第一個日歷插件的使用實例首先導入需要的類庫文件：首先進行頁面代碼的編寫：htmlview plaincopy1. 2. 3. Date:4. 5. 然后使用js代碼對插件進行調(diào)用javascriptview plaincopy1. ：2. 3. 4. 5. $(function()6. 7. /插件的調(diào)用8. 9. $(#datepicker).datepicker(10. 11. /在這里進行插件的屬性設置12. 13. );14. 15. );16. 17. 效果截圖：下面通過實例對一些常用屬性進行驗證：1、altField ：使用備用的輸出字段，即將選擇的日期以另一種格式，輸出到另一個控件中，值為選擇符，即要輸出的控件 altFormat：altField輸出的格式實例驗證：頁面代碼：htmlview plaincopy1. 2. 3. Date:4. 5. 6. 7. Js代碼：javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker(4. 5. altField:#alternate,6. 7. altFormat:DD,dMM,yy8. 9. );10. 11. );效果截圖：2、showAnim：設置日期面板顯示或隱藏的動畫名js代碼的編寫：javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker();4. 5. $(#anim).change(function()6. 7. $(#datepicker).datepicker(option,showAnim,$(this).val();8. 9. );10. 11. );3、showButtonPanel：是否顯示按鈕面板Js代碼：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. showButtonPanel:true4. 5. );如圖可以看到面板下方有兩個按鈕：點擊“今天”會跳到今天的日期，點擊“關閉”會關閉面板。4、dateFormat：指定顯示日期的格式Js代碼：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. dateFormat:yy/mm/dd4. 5. );效果截圖：通過圖像可以看到，文本框中日期格式由以前的“yy-mm-dd”轉(zhuǎn)變成了“by/mm/dd”。當然還有別的格式，可以根據(jù)自己的喜好進行設置。5、changeMonth：是否使用下拉列表選擇月份changeYear：是否使用下拉列表選擇年份在js代碼中添加此屬性：changeMonth:true或者changeYear:true其中標題欄的月份或者年份會出現(xiàn)下拉菜單的形式：6、yearRange：設置下拉列表框中顯示的年份范圍，可以是相對今年（-nn:+nn）或相對于選擇的年份（c-nn:c+nn）或絕對年份（nnnn:nnnn）在js代碼中添加屬性：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. changeYear:true,4. 5. yearRange:2011:20126. 7. );效果截圖：從圖中可以看到年的位置為下拉菜單的形式，其中下拉菜單只會出現(xiàn)2011與2012年的選項。注：yearRange屬性只有在changeYear為true的情況下才使用。7、numberOfMonths：設置一次要顯示幾個月?？梢詾榘瑑蓚€數(shù)字的數(shù)組，表示顯示的行數(shù)和列數(shù)Js代碼：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. numberOfMonths:34. 5. );上面指定numberOfMonths為3，那么彈出的日歷面板就會顯示當前以及以后兩個月，如圖：8、showOn：設置觸發(fā)選擇器的事件名稱buttonText：指定觸發(fā)按鈕上顯示的文本，showOn屬性應設置為button或bothbuttonImage：指定彈出按鈕圖像的URL，若設置則buttonText將成為alt值buttonImageOnly：是否將圖像放在控件后面，作為觸發(fā)器，如果設置為true那么按鈕將只剩下圖片作為按鈕，是頁面更加美觀這里我編寫三個文本框進行以上屬性的對比：1)Js代碼：javascriptview plaincopy1. $(#datepicker2).datepicker(2. 3. showOn:both,4. 5. buttonText:日歷按鈕6. 7. );效果截圖：2）將按鈕設置為圖片：Js代碼：javascriptview plaincopy1. $(#datepicker).datepicker(2. 3. showOn:button,4. 5. buttonImage:images/calendar.gif,6. 7. buttonImageOnly:true8. 9. );未設置buttonImageOnly屬性的效果：設置buttonImageOnly屬性為true后：通過以上對比，可以理解buttonImageOnly屬性的作用。9、minDate：可以選擇的最小日期，null表示無限制maxDate：可以選擇的最大日期。null表示無限制兩者都是根據(jù)以當天日期為基礎的。Js代碼：javascriptview plaincopy1. $(function()2. 3. $(#datepicker).datepicker(4. 5. /表示以當天為準，只有在20天之前和10天之后的日期之間的時間可以選擇6. 7. minDate:-20,8. 9. maxDate:+10D10. 11. );12. 13. );如下圖在7號之前都不可選擇（當前日期為27）：jQuery ui 利用 datepicker插件實現(xiàn)開始日期(minDate)和結束日期(maxDate)使用jQuery ui首先需要引入jQuery類庫，jQuery ui js腳本和jQuery ui css樣式表。代碼示例如下：注：引入js腳本時，需先引入jQuery類庫，后引入jQuery ui腳本下面為兩種實現(xiàn)步驟：思路一：第一步實現(xiàn)兩個datepicker組件。需要定義兩個input標簽，類型為text，并指定id屬性HTML代碼如下開始日期：結束日期：在js代碼中得到兩個input元素的jQuery對象，并將其轉(zhuǎn)化為datepicker組件Js代碼如下javascriptview plaincopy1. $(document).ready(function()2. 3. $(#start).datepicker();4. 5. $(#end).datepicker();6. 7. );實現(xiàn)以上操作后，在頁面中點擊文本框，如果出現(xiàn)datepicker則代表成功。第二步設置開始和結束日期當選擇開始日期的值后，則結束日期的最小值應該就是開始日期；同理，當選擇結束日期后，開始日期的最大值則應該是結束日期。我們可以利用datepicker中的onSelect屬性來設置當選擇指定日期后觸發(fā)的事件，通過該事件來指定對應的datepicker最小日期或最大日期。Js代碼如下javascriptview plaincopy1. $(#start).datepicker(2. 3. onSelect:function(dateText,inst)4. 5. $(#end).datepicker(option,minDate,dateText);6. 7. 8. 9. );10. 11. $(#e