Question

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

如何禁用所有未来日期？

见fiddle -
1.将maxDate设置为新日期（）
2.使用ExtJS 4.2

Answer 1

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

您可以看到here如何实例化MonthPicker。正如您在那里看到的那样，尤其是in the docs，MonthPicker没有提供禁用任何内容的配置选项。此外，如果您检查DatePicker行为，您会发现disabledDates选项不会更改MonthPicker中的任何内容，只有 AFTER 选择了该月，所有这些日子在DatePicker中被禁用。

因此，您可以自行为disabledDates实施MonthPicker，我会通过查看DatePicker和MonthPicker中的代码来尝试传输。

Answer 2

尝试这个...在ExtJS 6.0.0上工作。您需要覆盖＆＃39; Ext.picker.Month＆＃39; find attached image 可接受的值 - 新的RegExp（＆＃39;（？：）＆＃39;）; 停用所有月/年 新的RegExp（＆＃39; ^（（？！^ Apr / 2016 $ | ^ May / 2016 $ | ^ Jun / 2016 $ | ^ Jul / 2016 $）。）* $＆＃39;） 禁用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
    }
}

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

2 个答案: