Cancel button in date picker

Question

I have created a datepicker field. When the date picker is displayed and the cancel button is tapped, it takes the first value as the default value. I need to check a condition where I can handle the cancel button on the date pipcker field

 case 'Date':
        console.log('date value: '+value);
        var dt = new Date(value);
        console.log('new date: '+dt);
        if (dt == 'Invalid Date' || dt == 'NaN/NaN/0NaN') {
            value = '';
        } else {
            value = dt;
        }
        element = Ext.create('Ext.Container', {
            layout : 'hbox',
            items : [ {
                xtype : 'datepickerfield',
                label : label,
                name : 'standTimeEdit',
                defaultDateFormat : 'D M Y',
                value : value,
                width : '100%',
                style : 'border: 0px solid gray;border-radius:10px',
                listeners:{
                    change:function(){
                         value = dt;
                    }
                    cancel:function(){
                        console.log('cancel event fired');
                    }
                }
            } ]
        });
        break;

score 0 · Answer 1 · answered Jan 10 '13 at 06:21

0

You can try using cancel event of date picker field which will fired when the cancel button is tapped and the values are reverted back to what they were.

Hope it helps :)

answered Jan 10 '13 at 06:21

Eli

14,779
5
59
77

I have updated the code. The cancel event is not getting fired. – Khush Jan 10 '13 at 06:46
The issue could be that Cancel event is there for "Date" but not for "DatePicker". – Khush Jan 10 '13 at 08:51

score 0 · Answer 2 · answered Jan 21 '13 at 10:11

I solved this issue by overriding the cancel event in the picker.

var picker = this.getPicker();
picker.on('cancel',function(){
                            if(defValue == ''){
                                if(count > 1){
                                    picker.setValue(preVal);
                                    dateObj.setValue({day: preVal.getDate(), month: (preVal.getMonth()+1), year : preVal.getFullYear()});
                                }
                                else{
                                    picker.setValue(null);
                                    dateObj.setValue(null);
                                    count--;
                                }
                            }
                        });

This gave me a handle to the cancel button in the picker.

Cancel button in date picker

2 Answers2