ExtJS4- 年月日期选择器 - 禁用所有未来日期

Question

我正在使用 Ext.picker.Month。设置 maxDate 不会禁用大于 maxDate 值的日期，但会在选择日期时导致验证错误。

如何禁用所有未来日期？

参见fiddle-
1. 将 maxDate 设置为 new Date()
2. 使用 ExtJS 4.2

Answer 1

您正在实例化 MonthPicker，而不是 DatePicker，但您正在使用许多仅适用于 DatePicker 的配置选项。

你可以看到here how to instantiate a MonthPicker. As you can see there and especially in the docs，MonthPicker没有提供禁用任何东西的配置选项。此外，如果您检查 DatePicker 行为，您会看到 disabledDates 选项不会更改 MonthPicker 中的任何内容，仅 AFTER 选择了月份, DatePicker 中的所有日期都被禁用。

因此，您将自己为 MonthPicker 实现 disabledDates，我会通过查看 DatePicker 和 MonthPicker 中的代码来实现，并且正在尝试转移。

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

ExtJS4- 年月日期选择器 - 禁用所有未来日期

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

extjs

extjs4.2