get date in date picker in sencha touch

Question

In here i'm try to get alert of selected date of datepickerfeild in sencha touch 2.3. but it gives the last selected date in textfeild. that mean it pick the present value not currently selected one.

please help to resolve this problem. Here is my source code,

{    
    xtype: 'datepickerfield',
    destroyPickerOnHide: true,
    label: 'Date',
    name: 'targetDate',
    dateFormat :"y/m/d",
    value: new Date(),
    picker: {
        yearFrom : new Date().getFullYear()-1,

        listeners: {
            show: function(component, eOpts) {
                var date = this.getValue();
                if (!date || isDateInPast(date)) {
                    this.setValue(new Date());
                }
            },
            cancel: function(picker, eOpts) {
                this.fireEvent('change', this, null);
            }
        }, 
        doneButton: {
            listeners: {
                tap: function(button, event, eOpts) {
                    var picker = this.up('datepicker');
                    alert(picker.getValue());

                }
            }
        } 
    }
},

Answer 1

When button tap event is fired datepicker value has not been updated yet, so picker.getValue() returns previously selected value.

Instead of listening for tap event on button you should add listener for change event on your datepicker component. Second parameter passed into this listener contains new selected date value:

{    
    xtype: 'datepickerfield',
    destroyPickerOnHide: true,
    label: 'Date',
    name: 'targetDate',
    dateFormat :"y/m/d",
    value: new Date(),
    picker: {
        yearFrom : new Date().getFullYear()-1,

        listeners: {
            show: function(component, eOpts) {
                var date = this.getValue();
                if (!date || isDateInPast(date)) {
                    this.setValue(new Date());
                }
            },
            cancel: function(picker, eOpts) {
                this.fireEvent('change', this, null);
            },
            change: function(picker, value) {
                alert(value);
            } 
        }
    }
}