2016-07-29 144 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; 
 
}