2016-07-29 141 views
2

我使用ExtJS的4.2.5日期選擇爲客房管理,當用戶選擇一個日期我把它添加到一個數組,然後調用「setdisableDates」:用戶選擇一個日期Extjs DatePicker:如何使用鼠標點擊禁用日期啓用「點擊/選擇」?

enter image description here

sender.DisabledDates.push(date); 
sender.setDisabledDates(sender.DisabledDates); 

後它變爲禁用,並與CSS我改變背景顏色爲紅色。

如何在已禁用的日期啓用點擊或選擇,以防萬一用戶犯了錯誤並想取消?

感謝您的建議

回答

0

我能做到這樣通過重寫 「handleDateClick」:

function picker.beforeInit(sender, config) 
 
{ 
 
    config.cls='room_clndr'; 
 
    config.DisabledDates=[]; 
 
    config.disabledDaysText='חסום'; 
 
    config.handleDateClick = function(e, t){ 
 
     var me = this, 
 
     handler = me.handler;   
 
     e.stopEvent(); 
 
     if(!me.disabled && t.dateValue){//<--------- 
 
      me.doCancelFocus = me.focusOnSelect === false; 
 
      me.setValue(new Date(t.dateValue)); 
 
      delete me.doCancelFocus; 
 
      me.fireEvent('select', me, me.value); 
 
      if (handler) { 
 
       handler.call(me.scope || me, me, me.value); 
 
      } 
 
      me.onSelect(); 
 
     } 
 
    } 
 
}

和:

function picker.select(sender, date, eOpts) 
 
{ 
 
    if(jQuery.inArray(Ext.Date.format(date, 'd/m/Y'), sender.DisabledDates)>=0) { 
 
     sender.DisabledDates.splice($.inArray(Ext.Date.format(date, 'd/m/Y'), sender.DisabledDates), 1); 
 
     if(sender.DisabledDates.length>0) { 
 
     sender.setDisabledDates(sender.DisabledDates); 
 
     } 
 
     else { 
 
     sender.setDisabledDates([null]); 
 
     }   
 
    } 
 
    else { 
 
    sender.DisabledDates.push(Ext.Date.format(date, 'd/m/Y')); 
 
    sender.setDisabledDates(sender.DisabledDates);  
 
    } 
 
}

這裏的CSS:

.room_clndr .x-datepicker-disabled .x-datepicker-date 
 
{ 
 
background-color:#fe5757 !important; 
 
color: #fff !important; 
 
}