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

uurity8g  于 2022-11-04  发布在  其他
关注(0)|答案(2)|浏览(220)

我使用的是Ext. picker. Month。设置maxDate不会禁用大于maxDate值的日期,但在选择一个日期时会导致验证错误。
如何禁用所有未来日期?
见小提琴-
1.将maxDate设置为新日期()
2.使用ExtJS 4.2

xkftehaa

xkftehaa1#

您正在示例化一个MonthPicker,而不是一个DatePicker,但您正在使用许多只适用于DatePicker的配置选项。
您可以在这里看到如何示例化MonthPicker。正如您可以在那里看到的,特别是in the docsMonthPicker没有提供禁用任何内容的配置选项。另外,如果您检查DatePicker的行为,您会看到disabledDates选项没有更改MonthPicker中的任何内容,只有在 AFTER 月份被选择后,DatePicker中的所有日期都被禁用。
因此,您将独自为MonthPicker实现disabledDates,我将通过查看DatePickerMonthPicker的代码并尝试传输来实现这一点。

7gyucuyw

7gyucuyw2#

尝试这个...在ExtJS 6.0.0上工作。您需要覆盖**'Ext.picker. Month'find attached image接受的值- new RegExp('(?:)');***禁用所有月份/年份new正则表达式('^((?!^2016年4月$|^2016年5月$|^2016年6月$|^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
    }
}

相关问题