为 Ext.form.DateField 设置 AVAILABLE 的最小年份答案

【问题标题】：Setting the minimum year AVAILABLE for an Ext.form.DateField为 Ext.form.DateField 设置 AVAILABLE 的最小年份
【发布时间】：2015-10-08 04:11:21
【问题描述】：

我有一个基本的 Ext.form.DateField，它需要有一个最短日期。

很简单 - 只需将 minValue 字段设置为您想要的最短日期即可。例如，将允许的最小日期设置为当前月份和年份：

var myDateField = new Ext.form.DateField({ 
            fieldLabel: 'Date',
            value: new Date(),              
            columnWidth: 0.15,
            padding: 5,
            format: 'n/Y', 
            plugins: 'monthPickerPlugin',
            hidden: false,
            minValue: new Date()
        });

如果用户输入过去的日期，表单会显示一条错误消息，指出“此字段中的日期必须等于或之后...”和绑定的组件。

但是，我真正需要的是让用户一开始甚至无法从选择器中选择早年。

基本上，当日历出现时，我需要它只显示 2015 年及以后的年份 - 对于接下来的年份，2011、2012、2013 和 2014 年甚至不应该出现在日历中。

提前致谢

【问题讨论】：

标签： javascript date extjs

【解决方案1】：

不确定是否可行。

您可以使用 minValue 或 disabledDates 配置禁用日期，但它们仍会出现在列表中。

但是，一旦用户选择了他们被禁用的月份，请参阅下面的屏幕截图和示例：

disabled dates in calendar

ie.

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    bodyPadding: 10,
    title: 'Dates',
    items: [{
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'From',
        name: 'from_date',
        minValue:"01/01/2015",
        disabledDatesText:"Date not available.",
        maxValue: new Date()  // limited to the current date or prior
    }]
});

<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
<script src="//cdn.sencha.io/ext-4.2.0-gpl/ext-all.js"></script>

【讨论】：