easyui中的datebox中設置某年的某些月份不可選

最近做項目時約到一個需求就是要求2019年的12個月中只能選擇其中的某些月份，其他月份不可選擇，對於2018年的月份全部不可選，2020年以及以後的全部可選，

即效果如下:

 

參考了網上的一些資料以後，做了代碼的修改，實現了以上功能

function styleMonthDate(db,sdate,mArr,myear){  
      /*
      db --jquery對象
      sdate --'2010-02' ,默認的日期,
      mArr --需要設定的可選月份 元素爲字符串類型，['1','4','7','10']
      myear -- 需要設定的年份
      */
      db.datebox({
          onShowPanel: function() { //顯示日期選擇對象後再觸發彈出月份層的事件，初始化時沒有生成月份層
             changeDateColor(0);        
              //fix 1.3.x不選擇日期點擊其他地方隱藏在彈出日期框顯示日期面板
              if (p.find('div.calendar-menu').is(':hidden')) 
                p.find('div.calendar-menu').show();                
              if (!tds) setTimeout(function() { //延時觸發獲取月份對象，因爲上面的事件觸發和對象生成有時間間隔
                  tds = p.find('div.calendar-menu-month-inner td');                            
                  changeDateColor(0);                        
                //綁定年份選擇按鈕事件
                  p.find(".calendar-menu-prev").bind("click", function() {
                      changeDateColor(-1);
                  });
                  p.find(".calendar-menu-next").bind("click", function() {
                      changeDateColor(1);
                  });
                tds.click(function (e) {
                     e.stopPropagation(); //禁止冒泡執行easyui給月份綁定的事件
                     var year = /\d{4}/.exec(span.html())[0]//得到年份
                       year = p.find(".calendar-menu-year").val();
                     month = parseInt($(this).attr('abbr')); //月份
                     month=month<=9?'0'+month:month;
                     var da=year+month;
                     var now=getNowYearMonth().replace(/-/g,'');
                    if(!$(this).hasClass('calendar-other-month')){ 
                         //如果大於當前日期不允許填入
                            if(da>now){
                                return ;
                            }                                             
                          db.datebox('hidePanel').datebox('setValue', year + '-' +month); //設置日期的值
                      }
                });
               
              }, 0);
              //changeDateColor();
              //隱藏 標題兩側按鈕
              p.find(".calendar-prevmonth").hide();
              p.find(".calendar-nextmonth").hide();
              p.find(".calendar-prevyear").hide();
              p.find(".calendar-nextyear").hide();
              //禁止年份輸入框編輯
              p.find(".calendar-menu-year").attr("disabled", "disabled");
              //解綁年份輸入框中任何事件
              p.find(".calendar-menu-year").unbind();
          },
          parser: function (s) {//配置parser，返回選擇的日期
              if (!s) 
              return new Date();
              var arr = s.split('-');
              return new Date(parseInt(arr[0]), parseInt(arr[1]) - 1, 1);
          },
          formatter: function (date) {
              var y = date.getFullYear();
              var m = date.getMonth() + 1;
              return y + "-" + (m < 10 ? ("0" + m) : m);
           },     
      });
      //改變樣式
      function changeDateColor(i) {                
          //先初始化
          p.find('div.calendar-menu-month-inner td').each(function(index, element) {
                  var jqNode=$(element);
                  jqNode.removeClass('calendar-other-month');      
          });        
          p.find('div.calendar-menu-month-inner td').each(function(index, element) {         
              year = parseInt(p.find(".calendar-menu-year").val())+i;
              var jqNode=$(element);
              if ( year <=(myear-1)) {
                  jqNode.addClass('calendar-other-month');
              }// else if ((element.abbr ==3 || element.abbr==6 || element.abbr==9 || element.abbr==12) && year == "2019") {
                else if ( ($.inArray(element.abbr,mArr)==-1 && year == myear)) {              
                     jqNode.addClass('calendar-other-month');
                  }
                  
          }); 
      }
      var p = db.datebox('panel'); //日期選擇對象
      var tds=false;
      var span = p.find('span.calendar-text'); //顯示月份層的觸發控件    
      var yearArr = sdate.split('-');
      var year = yearArr[0];
      db.datebox('setValue', sdate);
  }
 

html中的代碼以及調用:

<label>查詢時間:</label>
<input id="ls_startDate" class="easyui-datebox" />

<script type="text/javascript">
$(function() {
//查詢時間修改成月
var db1=$('#ls_startDate');
//開始日期和結束日期的設置
styleMonthDate(db1,"2020-01",['1','4','7','10'],2019);
</script>

1.注意點:

  在 styleMonthDate 的函數中，用到了 $.inArray(value,arr) 函數，如果在Arr中找到了和value 相同（類型也相同，即 ===）的元素，返回該元素的下標，如果沒有找到，返回-1；

2.在easyui 中設置某個月份不可選擇的類是 ‘calendar-other-month’ 這個類實際就是設置了元素的透明度爲0.3