Geek asks and answers

ExtJS DateField - initialization date

I have an ExtJS date field. During some operation in the application, the minimum value and maximum value are assigned in the date field. The minimum value and the maximum value are 4 years before the current date, but when the date selection window opens, it opens for disabled current dates. The user must manually scroll back 4 years to select a date. Anyway, can I update the datepicker to open, showing the date between the minimum value and the maximum value?

Adding code:

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

this sets the minimum and maximum value. I can’t use setValue()because it initializes / modifies the text box. I want the text field to get value only when selected from datepicker.

thank

+3
source share
2 answers

You must set the initial value using the property valuefor Ext.form.field.DateView:

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

EDIT after receiving more information from OP:

You can override the method onExpandthat initializes the value on the collector. The original one looks like this: (given that you are using ExtJS 4 - but 3 should not differ much):

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

You can override the method to read:

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

Just add an override to the field configuration of the initial form.

+5
source

For anyone interested in solving EXTJS 3 for this problem, I made the following code.

This allows you to pass initialDateToShowOnPickeras a configuration Ext.DatePickerwhen it is declared, if necessary.

setInitialDateToShowOnPicker(initialDateToShowOnPicker) datepicker, .

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

More articles:


All Articles