jQuery插件的應用之 --- 日歷
一 介紹
（1）優點：在頁面開發中，經常會遇到需要用戶輸入日期的操作，通常的做法是提供一個文本框，讓用戶輸入，然後，再編寫代碼驗證輸入的數據，檢測其是否是日期類型，這樣比較麻煩，同時，用戶輸入日期的操作也不是很方便，影響用戶體驗。如果使用jQueryUI中的datepicker插件，這些問題就可以迎刃而解
（2）導入的js和css文件
- jquery-1.7.1.min.js"
- jquery-ui-1.8.18.custom.min.js"
- jquery.ui.core.js"
- jquery.ui.datepicker.js"
- jquery.ui.widget.js"
- jquery.ui.datepicker-zh-CN.js" 把界面的改為中文的所需要導入的包
- jquery-ui-1.8.18.custom.css"
（3）功能實現
在頁面中，當單機文本框時，通過datepicker插件彈出一個日期選擇窗口，該窗口可以使用下拉列表框的方式選擇年份與月份，並顯示與日期相對應的星期。
二 代碼詳解
1．首先來創建一個jsp頁面
- <body>
- <div>
- <form action="">
- <input type="text" id="datepicker"/>
- </form>
- </div>
- </body>
2. 然後用js代碼來注冊當點擊id="datepicker"時觸發的事件
- <script type="text/javascript">
- $(document).ready(function(){
- $("#datepicker").datepicker();
- });
- </script>
- 然後我們就可以向datepicker()中加入參數來修飾日期
- （1）在日期的標題欄中顯示下拉列表框
- //在日期的標題欄中是否出現下拉選擇框，選擇日期中的月份，true代碼有選擇框
- changeMonth : true,
- changeYear : true//在日期的標題欄中出現下拉列表框顯示年
- （2）關閉彈出的日期框
- //在日期面板的下方出現2個按鈕，一個是tody，一個是關閉，默認值是不顯示的
- showButtonPanel : true,
- //關閉的效果文字必須結合showButtonPanel:true來使用
- closeText : "關閉"
-
- （3）設定在文本框中的格式
- dateFormat : "yy-mm-dd"
- （4）設置日期的缺省值，在當前日期中 加或減一天
- defaultDate : "-3"
- （5）設置日期出現和消失的動畫效果，比如有slide，toggle
- showAnim : "slide"
- （6）現在當年中的第一周，在左邊顯示
- showWeek : true
- （7）默認fisrtDay是當年的第一天
- firstDay : 1
- （8）表示下拉框中的年份的范圍
- yearRange : "2011:2012"
- （9）如果是兩個選框，填寫的是從哪一天到哪一天的話，要獲取點擊的值並判斷值
- onSelect : function(selectedDate) {
- //獲取當前 對象this.id=dp minDate //開始日期的最小值
- //獲取 option的值是minDat或者是maxDate 根據dom對象的id
- var option = this.id == "dep" ? "minDate" : "maxDate",
- //獲取當前日期的實例對象 ，每遍歷一次就 獲取一次
- instance = $( this ).data( "datepicker" ),
- //獲取日期 instance.settings 獲取日期的值
- date = $.datepicker.parseDate(
- instance.settings.dateFormat ||
- $.datepicker._defaults.dateFormat,
- selectedDate, instance.settings );
- alert(instance.settings);
- //設置日期
- dates.not( this ).datepicker( "option", option, date );
- },
- （10）在應用中還可能會用到點擊圖片或按鈕彈出選擇日期的對話框，會用到幾下幾個屬性
- //點擊按鈕時出發的事件
- showOn:"button",
- //向按鈕上添加文本
- buttonText:"選擇日期",
- //向按鈕上添加圖片
- buttonImage:" images/calendar.gif",
- //設置只顯示圖片 ，沒有按鈕
- buttonImageOnly:true,
- （11）還有就是補全所有的日期，但是是不可選的
- //補全所有的
- showOtherMonths:true,
- //在當前月中，其他月的日期不可以選擇 ，，默認為false
- selectOtherMonths:false
- （12）把顯示的日期換成中文的格式，要導入包jquery.ui.datepicker-zh-CN.js，也可以加入$.datepicker.setDefaults($.datepicker.regional["zh-CN"]);來聲明
-
- 整體的代碼為：
- <script type="text/javascript">
- //當頁面 加載完畢的時候觸發的匿名函數
- $(document).ready(function() {
- $.datepicker.setDefaults($.datepicker.regional["zh-CN"]);
- //當點擊的時候觸發事件，點擊的時候直接顯示
- //判斷開始日期的最大值等於結束日期的最小指
- var dates = $("#dep,#end").datepicker(
- {
- changeMonth : true,//在日期的標題欄中是否出現下拉選擇框，選擇日期中的月份，true代碼有選擇框，fals代碼沒有選擇框
- changeYear : false,//在日期的標題欄中出現下拉列表框顯示年
- showButtonPanel : true, //在日期面板的下方出現2個按鈕，一個是tody，一個是關閉，默認值是不顯示的
- closeText : "關閉", //關閉的效果文字必須結合showButtonPanel:true來使用
- dateFormat : "yy-mm-dd", //設定在文本框中的格式
- defaultDate : "-3", //缺省值，在當前日期中 加或減一天
- showAnim : "slide", //設置動畫效果 slide toggle
- showWeek : true, //顯示當年中的第幾 周,在最左邊
- firstDay : 1, //默認fisrtDay是當年的第一天
- yearRange : "2011:2012", //表示下拉框中的年份的范圍
-
- onSelect : function(selectedDate) {
- //獲取當前 對象this.id=dp minDate //開始日期的最小值
- //alert(this);
- //獲取 option的值是minDat或者是maxDate 根據dom對象的id
- var option = this.id == "dep" ? "minDate" : "maxDate",
- //獲取當前日期的實例對象 ，每遍歷一次就 獲取一次
- instance = $( this ).data( "datepicker" ),
- //獲取日期 instance.settings 獲取日期的值
- date = $.datepicker.parseDate(
- instance.settings.dateFormat ||
- $.datepicker._defaults.dateFormat,
- selectedDate, instance.settings );
-
- alert(instance.settings);
- //設置日期
- dates.not( this ).datepicker( "option", option, date );
- },
- //提示信息
- prevText:"上一月",
- nextText:"下一月",
- //顯示幾個選擇的日期
- numberOfMonths:1,
- //點擊按鈕時出發的事件
- showOn:"button",
- //向按鈕上添加文本
- buttonText:"選擇日期",
- //向按鈕上添加圖片
- buttonImage:" images/calendar.gif",
- //設置只顯示圖片 ，沒有按鈕
- buttonImageOnly:true,
- //補全所有的
- showOtherMonths:true,
- //在當前月中，其他月的日期不可以選擇 ，，默認為false
- selectOtherMonths:false
- });
- });
- </script>
效果為：
