CODEWITHSUNDEEP
extjsdatepickerdatefield
Akshit Ahuja
Akshit Ahuja

Reputation: 337

How to stop closing datepicker after selecting date in Ext JS 3.4

I have a datepicker and I have added an extra button to it. On clicking that button I managed to close the datepicker. The only thing I want is that after selecting the date, the datepicker should remain open.

How to achieve this?

enter image description here

My Code:

new Ext.form.DateField({
    renderTo: this.id,
    cls: 'next-rev-input',
    name: 'date_' + this.id,
    id: 'date_' + this.id,
    width: 0,
    listeners: {
        'select': function (e) {},
        render: function (field) {
            var me = this,
                trigger = me.trigger;
            trigger.on('click', function () {
                if (me.menu.picker) {
                    var btn = new Ext.Button({
                        renderTo: me.menu.picker.getEl().child('td.x-date-bottom', true),
                        text: 'Save',
                        handler: function () {
                            var topic_id = field.id.substring(12);
                            var selectedDate = field.getValue();
                            var formatedSelectedDate = selectedDate.format("M d, Y");
                            me.menu.picker.getEl().parent('div.x-menu-floating').setStyle('visibility', 'hidden');
                            Ext.select('.x-shadow').setStyle('visibility', 'hidden');
                            var API = helpiq.api.alltopics;
                            API.updateRevDate(topic_id, selectedDate, {
                                scope: this,
                                success: function (rs) {
                                    Ext.select('#date' + topic_id).update(formatedSelectedDate);
                                }
                            });
                        }
                    });
                }
            }, null, {
                single: true
            });
        }
        // change: function(){
        // console.log(this.id);
        // }
    }
});

Upvotes: 1

Views: 1226

Answers (3)

Akshit Ahuja
Akshit Ahuja

Reputation: 337

The right solution for this question is:

onSelect: function (m, d) {
    this.setValue(d);
    this.fireEvent('select', this, d);
    return;
}

Upvotes: 2

Rohit Sharma
Rohit Sharma

Reputation: 1410

Some addition to @beso9595's answer:

You can override onSelect method of Ext.form.DateField class as shown below:

Code snippet:

{
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'To',
    name: 'to_date',
    value: new Date(), // defaults to today
    onSelect: function (m, d) {
        var me = this;

        me.setValue(d);
        me.rawDate = d;
        me.fireEvent('select', me, d);

        // Focus the inputEl first and then collapse. We configure 
        // the picker not to revert focus which is a normal thing to do 
        // for floaters; in our case when the picker is focusable it will 
        // lead to unexpected results on Tab key presses. 
        // Note that this focusing might happen synchronously during Tab 
        // key handling in the picker, which is the way we want it. 
        // me.onTabOut(m); // Commented this line as in this function the collapse of the picker is called
    }
}

Working Example

Hope this will help/guide you.

Upvotes: 1

beso9595
beso9595

Reputation: 1174

You can override onSelect method of Ext.form.DateField class and type return at the top, to prevent it from execution.

onSelect: function (m, d) {
    return; //this ends the function execution
    this.setValue(d);
    this.fireEvent('select', this, d);
    this.menu.hide();
}



Here's the FIDDLE

Upvotes: 0

Related Questions