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

【问题标题】：ExtJS4- Year and month date picker - disable all future datesExtJS4- 年月日期选择器 - 禁用所有未来日期
【发布时间】：2016-06-29 07:18:21
【问题描述】：

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

如何禁用所有未来的日期？

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

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

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

您可以查看here 如何实例化MonthPicker。正如你所看到的，尤其是in the docs，MonthPicker 没有提供禁用任何东西的配置选项。此外，如果您检查DatePicker 行为，您会看到disabledDates 选项不会更改MonthPicker 中的任何内容，仅AFTER 月份被选中，DatePicker 中的所有日期都被禁用。

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

【讨论】：

【解决方案2】：

试试这个...在 ExtJS 6.0.0 上工作。您需要覆盖 'Ext.picker.Month' find attached image 可接受的值 - 新正则表达式('(?:)'); 禁用所有月/年 new RegExp('^((?!^Apr/2016$|^May/2016$|^Jun/2016$|^Jul/2016$).)*$') 禁用除2016 年 4 月/5 月/6 月/7 月

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

【讨论】：