2016-07-29 12 views
2

ユーザーが、私は、配列に追加して、「setdisableDates」と呼ぶの日付を選択すると、私は、部屋の管理のためのExtJS 4.2.5日付ピッカーを使用しています。ユーザーの後Extjs DatePicker:無効にされた日付でマウスクリックで 'クリック/選択'を有効にするにはどうすればよいですか?

enter image description here

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

を日付を選択それは無効になり、CSSで私は背景色を赤に変えます。

ユーザーが間違いを犯してキャンセルしたい場合に備えて、既に無効になっている日付には、クリックまたは選択を有効にするにはどうすればよいですか?

は、私が "handleDateClick" をオーバーライドすることで、そうするように管理アドバイス

答えて

0

にありがとう:

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; 
 
}

関連する問題