ExtJS4- Year and month date picker - disable all future dates

Question

I am using a Ext.picker.Month. Setting maxDate does not disable dates which are grater than the maxDate value, but causes a validation error when selecting one.

How can I disable all future dates?

See fiddle -
1. Set maxDate to new Date()
2. Use ExtJS 4.2

Answer 1

You are instantiating a MonthPicker, not a DatePicker, yet you are using dozens of config options that are only available for a DatePicker.

You can see here how to instantiate a MonthPicker. As you can see there and especially in the docs, MonthPicker does not provide a config option to disable anything. Also, if you check the DatePicker behaviour, you see that disabledDates option does not change anything in MonthPicker, only AFTER the month has been selected, all days in the DatePicker are disabled.

So you would be on your own in implementing disabledDates for the MonthPicker, which I would do by looking at the code from DatePicker and MonthPicker, and trying to transfer.

Answer 2

Try this one...working on ExtJS 6.0.0. You need to override 'Ext.picker.Month' find attached image Accepted values - new RegExp('(?:)'); disable all month/year new RegExp('^((?!^Apr/2016$|^May/2016$|^Jun/2016$|^Jul/2016$).)*$') disable all values other than Apr/May/Jun/Jul 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
    }
}