hide textfield based on date difference in extjs

Question

How to hide a textfield based on selected date range from extjs date picker? I have to hide the textfield if the difference between start date and end date is more than 30 days.

        {
            title: 'Start Date',
            margin: '0 20 0 0',
            items: {
                xtype: 'datepicker',
                value: Ext.Date.add(new Date(), Ext.Date.DAY, -1),
                itemId: 'startDate',
                showToday: false,
            }
        },
        {
            title: 'End Date',
            margin: '0 20 0 0',
            items: {
                xtype: 'datepicker',
                itemId: 'endDate',
                value: Ext.Date.add(new Date(), Ext.Date.DAY, -1),
                showToday: false
            }
        }
    ]
},
{
    xtype: 'container',
    layout: 'hbox',
    items: [
        {
            margin: '0 20 0 0',
            items: {
                xtype: 'textfield',
                name: 'text'
            }
        }

Answer 1

In ExtJs have Date singletone class here is method to calculate difference bw 2 dates

I have created an small demo. You can see how it is working Sencha Fiddle

Hope it will help you to solve your problem.

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    bodyPadding: 10,
    title: 'Dates',
    items: [{
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'Start Date',
        name: 'from_date',
        listeners: {
            select: function () {
                this.up().onDateSelect();
            }
        }
    }, {
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'End Date',
        name: 'to_date',
        listeners: {
            select: function () {
                this.up().onDateSelect();
            }
        }
    }, {
        xtype: 'textfield',
        fieldLabel: 'Hidable field',
        name: 'fName'
    }],
    onDateSelect: function () {
        var startDate = this.down('[name=from_date]').getValue(),
            endDate = this.down('[name=to_date]').getValue(),
            textField = this.down('[name=fName]');
        textField.setHidden(Ext.Date.diff(startDate, endDate, 'd') > 30);
    }
});