CODEWITHSUNDEEP
extjsdatepickerdatefield
Zaje
Zaje

Reputation: 2309

ExtJS DateField - initialising date

I have an ExtJS Date field. During some operation in the application, min value and max value get assigned to the date field. The min value and max value are 4 years prior to the current dat, but when the date picker opens up, it opens to the disabled current dates. The user has to manually scroll back 4 years to select a date. Anyways I can update the datepicker to open up by showing the date between the min value and max value ?

Adding code:

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

this sets the min and max value. I cant use setValue() because it inialises/changes the textfield. I want the textfield to get value only on selection from the datepicker.

Thanks

Upvotes: 3

Views: 19603

Answers (2)

PadraigD
PadraigD

Reputation: 651

For anyone interested in an EXTJS 3 solution to this problem, I've made the following code.

This allows you to pass initialDateToShowOnPicker as a config to the Ext.DatePicker when declaring it, if needed.

It also allows you to call setInitialDateToShowOnPicker(initialDateToShowOnPicker) on the datepicker component to set it dynamically.

Both require a Date() type to be used, and there cannot be a value already set on the 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');
    }
});     }

Upvotes: 0

Stefan Gehrig
Stefan Gehrig

Reputation: 83682

You have to set an initial value using the value property of the Ext.form.field.DateView:

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

EDIT after more info from the OP:

You may override the onExpand method that initializes the value on the picker. The original one looks like (given that you use ExtJS 4 - but 3 should not be that much different):

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

You could 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 the override to the initial form field configuration.

Upvotes: 5

Related Questions