Give date picker different default value than datefield value?

Question

I am working in Extjs 4.2 and have come across a problem regarding datefield. I would like to set the default value of the field to a specific date, but when the user clicks on the trigger to display the date picker widget, I would like the date picker to have the current date highlighted. I have tried using the setValue method on the field in the 'expand' event handler, but this changes the value in the datefield itself which I do not want to happen. Is there any way to achieve this?

Joris Heus Joris Heus · Accepted Answer · 2017-05-03T18:33:41

Set the activeDate member of the datepicker to the current date, and then update the picker to show the highlighted date. This is done in the expand event.

expand: function(field, opts) {
                        field.picker.activeDate = new Date();
                        field.picker.update(null, false);
                    }

In the example below, the date is set to january 1st. When the picker is expanded, it is set to today.

Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            width: 300,
            bodyPadding: 10,
            title: 'Dates',
            items: [{
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'From',
                name: 'from_date',
                value: new Date(2017,0,1),
                listeners: {
                    expand: function(field, opts) {
                        field.picker.activeDate = new Date();
                        field.picker.update(null, false);
                    }
                }
            }]
        });

Give date picker different default value than datefield value?

1 Answers