DateField onChange event only on lost focus?

[al_capone]

I added Ext.form.DateField component into toolbar. When I click on DateField Trigger button and select DateValue from DatePicker, selected value is added into input field. This is OK. But
change event is called only after clicking outside Datefield. It is there event or other way how update my grid automatically when date value from DatePicker is added to DateField component? Thanks

var dateFrom = new Ext.form.DateField({
        id: 'dateFrom',
        width: 80,
        value: todayDate,
        selectOnFocus: false,
        readOnly: true,
        allowBlank: false
    });
    dateFrom.on('change', getFilteredValues);

    function renderDate(value){
        return value.dateFormat('d.m.Y');
    }   

    function getFilteredValues() {
      ds.on('beforeload', function() {
        ds.baseParams = { 
            filterDateFrom: renderDate(dateFrom.getValue())
        };
      });
      ds.load({params:{start:0, limit:myPageSize}});
    } 

[ffzhuang]

Hi, al_capone:

I have the same problem. Jack had suggestion something like this:

Ext.form.DateField.prototype.menuListeners.show = function(){
this.onFocus();
}

However, this event only fired before date is pickup.

Anyone suggestion will be really appreciated.

Regards!

Fenqiang Zhuang

[mrogers]

If you are trying to get the event of a user selecting a date on the calendar, this is the way:

Ext.form.DateField.prototype.menuListeners.hide = function(){
//do whatever here, like this.onBlur();
};

Use it with the .show event to see if the value has changed.

[al_capone]

mrogers,

thanks your code works fine
when i was waiting for some answer to my question i coded something like this:
it looks like DateField component

var todayDate = new Date();
var fromDate = new Date();
var toDate = new Date();

var dateMenuFrom = new Ext.menu.DateMenu({
        handler : function(dp, date){
            if (date>toDate) {
                Ext.Msg.alert('Bad date', 'Date "FROM" must be less than date "TO".');
            } else {
                fromDate = date;
                buttonDateFrom.setText(renderDate(fromDate));
                getFilteredValues();
            }
        }
    });

var buttonDateFrom = new Ext.Toolbar.Button({
        id: 'buttonDateFrom',
        cls: 'x-btn-text-icon',
        icon: iconPath + 'silk/icons/date_previous.png',
        text: renderDate(todayDate),
        menu: dateMenuFrom
    });


var tb = new Ext.Toolbar(gridHead);
tb.addField(buttonDateFrom); 

[wck555]

This pointed me in the right direction but had a few minor problems: "hide" is called even when the user presses "ESC" to close the date picker without picking a date. In addition this solution replaces the original hide function in datefield which appears to have some important code in it. My solution is still a bit of a hack since it could be invalidated by a change in Ext. But for now it works.

Add this code to your project

Ext.form.DateField.prototype.menuListeners.select = function(m,d)
{
    this.setValue(d);                 // write date user selected into the text box
    this.fireEvent('dateselect');   // fire dateselect event
}

Then subscribe to the "dateselect" event of your datefield control(s) to receive notification when the user picks date:

myDateControl.on('dateselect', onChangeDate, this);

If you are trying to get the event of a user selecting a date on the calendar, this is the way:

Ext.form.DateField.prototype.menuListeners.hide = function(){
//do whatever here, like this.onBlur();
};

Use it with the .show event to see if the value has changed.

[mickh]

I know this is an old thread, but I hit this problem today and realised what I was doing wrong, and so figured I'd report it here in case it helps others in the future.

So, I hit the problem that a DateField embedded in a toolbar was only firing the 'change' event when focus moved away from the DateField.

The solution was to use the 'select' event instead. It fires as soon as a date is selected. So, I now have:

        new Ext.form.DateField({
            readOnly: true,
            listeners: {
                'select' : {
                    fn: function(field, date) {
                        // ... do something useful here ...
                    }
                }
            }
        });

cheers,
mick