在限制了可選日期范圍的calendar中,使幾個日期不可選的方法


1. 加入calendar的准備工作

我們使用了datepicker來加入calendar,要想使用datepicker,就需要引用jquery包,我們引用了jquery-1.5.1.min.js和jquery-ui.min.js,並引用jquery-ui.css加入樣式。

2. html

<input type="text" readonly="readonly" id="datepicker"/>

3. 本地化

默認的jquery中只有英文, 沒有中文,要本地話,需要引入新的文件jquery.ui.datepicker-zh-CN.js

4. jquery, 加入calendar,並設置可選范圍為從當前日期開始的7天內(帶有中英文)

$(document).ready(function() {
        setDatePicker('datepicker','datepicker');

      function setDatePicker(triggerId,altField){
            var lang = "${currentLanguage eq 'zh' ? 'zh-CN' : ''}";
            $.datepicker.setDefaults($.datepicker.regional[lang]);
            $("#" + triggerId).datepicker({
                altField:"#" + triggerId,
                altFormat:"yy-mm-dd",
                changeMonth:true,
                changeYear:false,
              closeText: "X",
              minDate: 0,
                maxDate:+6,
                navigationAsDateFormat: true,
                selectOtherMonths: false,
                showOn: "button",
                buttonImage: "calendar.gif",
                buttonImageOnly: false ,
                buttonText: ""
        });
    }  
});

5. 使2013/1/1, 2013/1/2不可選,加入beforeShowDay,使每個日期在顯示前都執行這個方法過濾,返回[false, 'CLOSED']為不可用

$(document).ready(function() {
        setDatePicker('datepicker','datepicker');   

    function setDatePicker(triggerId,altField){
            var lang = "${currentLanguage eq 'zh' ? 'zh-CN' : ''}";
            $.datepicker.setDefaults($.datepicker.regional[lang]);
            $("#" + triggerId).datepicker({
                altField:"#" + triggerId,
                altFormat:"yy-mm-dd",
                changeMonth:true,
                changeYear:false,
              closeText: "X",
                minDate: 0,
                maxDate:+6,
                navigationAsDateFormat: true,
                selectOtherMonths: false,
                showOn: "button",
                buttonImage: "calendar.gif",
                buttonImageOnly: false ,
              buttonText: "",
                beforeShowDay: function(date) {
                  var days = [[1,1,2013],[1,2,2013]];
                  for(i=0; i<days.length; i++){                    
                      if(date.getDate()==days[i][1] && date.getMonth()==days[i][0]-1 && date.getFullYear()==days[i][2]){
                          return [false, 'CLOSED'];
                      }
                  }                
                  return [true, ''];                                
              }
        });
    }  
});

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM