ExtJS4- Datumsauswahl für Jahr und Monat - alle zukünftigen Daten deaktivieren

Question

Ich verwende einen Ext.picker.Month. Die Einstellung maxDate deaktiviert keine Datumsangaben, die größer als der maxDate-Wert sind, verursacht jedoch bei der Auswahl einen Validierungsfehler.

Wie kann ich alle zukünftigen Daten deaktivieren?

Siehe fiddle-
1. Set MaxDate zu new Date()
2. Verwenden Sie ExtJS 4.2

Answer 1

Sie sind ein MonthPicker instanziiert wird, kein DatePicker, aber Sie werden Dutzende von Konfigurations-Optionen verwenden, die nur sind verfügbar für eine DatePicker.

Sie können here sehen, wie Sie eine MonthPicker instanziieren. Wie Sie dort sehen können und vor allem in the docs, MonthPicker bietet keine Konfigurationsoption, um alles zu deaktivieren. Auch wenn Sie das DatePicker Verhalten überprüfen, sehen Sie, dass disabledDates Option nichts in MonthPicker ändert, nur NACH der Monat ausgewählt wurde, sind alle Tage im DatePicker deaktiviert.

Sie würden also auf eigene Faust sein disabledDates für die MonthPicker bei der Umsetzung, die ich mit Blick auf den Code von DatePicker und MonthPicker, und zu versuchen, zu übertragen, tun würde.

Answer 2

Probieren Sie diese aus ... unter ExtJS 6.0.0. Sie müssen 'Ext.picker.Month' find attached image Akzeptierte Werte außer Kraft zu setzen - neue RegExp ('(:)?'); disable all Monat/Jahr neuer RegExp ('^ ((^ Apr/2016 $ |?!^Mai/2016 $ |^Jun/2016 $ |.^Juli/2016 $)) * $') deaktivieren Sie alle andere Werte als Apr/Mai/Juni/Juli 2016

CSS - 
.x-monthpicker-disabled { 
background-color: #eee !important; 
cursor: default !important; 
color: #bbb !important; 
} 


disabledCls: Ext.baseCSSPrefix + 'monthpicker-disabled', 
disabledMonthYearsRE: null, 
disabledMonthYearsText: 'Disabled', 

updateBody: function() { 
    //default Extjs code 
    if (me.rendered) { 
     //default Extjs code 
     //remove disabled cls and tooltip 
     years.removeCls(disabledCls); 
     months.set({ 
      'data-qtip': '' 
     }); 
     years.set({ 
      'data-qtip': '' 
     }); 
     months.removeCls(disabledCls); 
     //default Extjs code 
     if (dmyMatch) { 
      if (month == null && year == null) { 
       months.set({ 
        'data-qtip': dmyText 
       }); 
       months.addCls(disabledCls); 
      } 
      yrInView = false; 
      for (y = 0; y < yLen; y++) { 
       yr = yearNumbers[y]; 
       el = Ext.fly(yearItems[y]); 
       if (dmyMatch.toString().indexOf(yr) == -1) { 
        el.dom.setAttribute('data-qtip', dmyText); 
        el.addCls(disabledCls); 
       } 
       if (yr == year) { 
        yrInView = true; 
       } 
      } 
      if (year != null && yrInView) { 
       for (m = 0; m < mLen; m++) { 
        mNo = m; 
        if (mNo < monthOffset) { 
         mNo = mNo * 2; 
        } else { 
         mNo = (mNo - monthOffset) * 2 + 1; 
        } 
        mt = months.elements[mNo]; 
        if (dmyMatch.test(mt.text + "/" + year)) { 
         mt.setAttribute('data-qtip', dmyText); 
         mt.className = disabledCls + ' ' + mt.className; 
        } 
       } 
      } else { 
       //Add tooltip 'disabled' 
       months.set({ 
        'data-qtip': dmyText 
       }); 
       months.addCls(disabledCls); 
      } 
     } 
    } 
}, 
//Disable month and year click for disabled values 
onMonthClick: function (target, isDouble) { 
    var me = this; 
    if (!me.disabled && !Ext.fly(target).hasCls(me.disabledCls)) { 
     //default Extjs code 
    } 
}, 

onYearClick: function (target, isDouble) { 
    var me = this; 
    if (!me.disabled && !Ext.fly(target).hasCls(me.disabledCls)) { 
     //default Extjs code 
    } 
}