ExtJS DateField - 初始化日期答案

【问题标题】：ExtJS DateField - initialising dateExtJS DateField - 初始化日期
【发布时间】：2012-04-20 06:56:36
【问题描述】：

我有一个 ExtJS 日期字段。在应用程序的某些操作期间，最小值和最大值被分配给日期字段。最小值和最大值比当前日期早 4 年，但是当日期选择器打开时，它会打开禁用的当前日期。用户必须手动向后滚动 4 年才能选择日期。无论如何，我可以通过显示最小值和最大值之间的日期来更新日期选择器以打开？

添加代码：

cmpDt.setMinValue(new Date(2000, 0, 1));
cmpDt.setMaxValue(new Date(2004, 0, 1));

这设置最小值和最大值。我不能使用setValue()，因为它会初始化/更改文本字段。我希望文本字段仅在从日期选择器中选择时获得价值。

谢谢

【问题讨论】：

标签： extjs datepicker datefield

【解决方案1】：

您必须使用Ext.form.field.DateView 的value 属性设置初始值：

{
    ...,
    minValue: new Date(2000, 0, 1),
    maxValue: new Date(2004, 11, 31),
    value: new Date(2002, 5, 15),
    ...
}

编辑从 OP 获得更多信息：

您可以覆盖初始化选取器上的值的onExpand 方法。原来的样子（假设您使用 ExtJS 4 - 但 3 应该没有那么大的不同）：

...,
onExpand: function() {
    var value = this.getValue();
    this.picker.setValue(Ext.isDate(value) ? value : new Date());
},
...

你可以重写读取方法：

...,
onExpand: function() {
    var value = this.getValue(),
        myDefaultDate = /* do some processing to determine the default date*/;
    this.picker.setValue(Ext.isDate(value) ? value : myDefaultDate);
},
...

只需将覆盖添加到初始表单字段配置即可。

【讨论】：

我无法在初始配置中添加它，因为在执行的某些操作之间设置了最小值和最大值。
嗨，在实现上述代码后，我的选择器没有在 extjs 4 中扩展或填充。

【解决方案2】：

对于任何对此问题的 EXTJS 3 解决方案感兴趣的人，我编写了以下代码。

这允许您在声明时将initialDateToShowOnPicker 作为配置传递给Ext.DatePicker（如果需要）。

它还允许您在 datepicker 组件上调用 setInitialDateToShowOnPicker(initialDateToShowOnPicker) 来动态设置它。

两者都需要使用 Date() 类型，并且不能在 datepicker 上已经设置值。

if (Ext.versionDetail && Ext.versionDetail.major == 3) {

Ext.form.DateField.prototype.setInitialDateToShowOnPicker = function (initialDateToShowOnPicker) {
    this.initialDateToShowOnPicker = initialDateToShowOnPicker;
};

Ext.form.DateField.override({
    onTriggerClick: function() {
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.DateMenu({
                hideOnClick: false,
                focusOnSelect: false
            });
        }
        this.onFocus();
        Ext.apply(this.menu.picker,  {
            minDate : this.minValue,
            maxDate : this.maxValue,
            disabledDatesRE : this.disabledDatesRE,
            disabledDatesText : this.disabledDatesText,
            disabledDays : this.disabledDays,
            disabledDaysText : this.disabledDaysText,
            format : this.format,
            showToday : this.showToday,
            startDay: this.startDay,
            minText : String.format(this.minText, this.formatDate(this.minValue)),
            maxText : String.format(this.maxText, this.formatDate(this.maxValue)),
            initialDateToShowOnPicker: this.initialDateToShowOnPicker // Date() type
        });
        this.menu.picker.setValue(this.getValue() || this.initialDateToShowOnPicker || new Date());
        this.menu.show(this.el, "tl-bl?");
        this.menuEvents('on');
    }
});     }

【讨论】：