ExtJS DateField -初始化日期

Question

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

添加代码：

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

这将设置最小值和最大值。我不能使用setValue()，因为它初始化/改变了文本字段。我希望文本字段仅在从datepicker中选择时才获取值。

谢谢

Answer 1

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

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

在操作员提供更多信息后，编辑：

您可以重写在选取器上初始化值的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);
},
... 

只需将覆盖添加到初始表单域配置。

Answer 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');
    }
});     }