根据extjs中的日期差异隐藏文本字段

如何从extjs日期选择器中隐藏基于所选日期范围的文本字段？如果开始日期和结束日期之间的差异超过30天，我必须隐藏文本字段

        {
            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'
            }
        }

在ExtJs中，这里有一个计算BW2日期差的方法

我已经创建了一个小演示。你可以看到它是如何工作的

希望它能帮助你解决你的问题

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);
    }
});

---

您可以收听两个日期选择器的

select

事件，获取并查找两个日期之间的差异，并相应地隐藏文本字段

    listeners: {
     select: function(datepicker, startDate) {
     var endDate = datepicker.up('form').down('#endDate').getValue();
     var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
     var diffDays = Math.round(Math.abs((endDate.getTime() - startDate.getTime()) / (oneDay)));
     if (diffDays > 30) {
          datepicker.up('form').down('[name=text]').hide();
         } else {
          datepicker.up('form').down('[name=text]').show();
         }
    }
   }

使用

处理程序

：

handler: function(datepicker, startDate) {
             var endDate = datepicker.up('form').down('#endDate').getValue();
             var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
             var diffDays = Math.round(Math.abs((endDate.getTime() - startDate.getTime()) / (oneDay)));
             if (diffDays > 30) {
                  datepicker.up('form').down('[name=text]').hide();
                 } else {
                  datepicker.up('form').down('[name=text]').show();
                 }
            }

示例工作代码：

Ext.application({
名字：“小提琴”，
启动：函数（）{
Ext.create（'Ext.form.Panel'{
标题：“简单形式”，
//田野
项目：[{
标题：“开始日期”，
边距：“0200”，
项目：{
xtype:'日期选择器'，
值：Ext.Date.add（new Date（），Ext.Date.DAY，-1），
itemId:'开始日期'，
今日秀：假，
处理程序：函数（datepicker，startDate）{
var endDate=datepicker.up（'form'）.down（'#endDate'）.getValue（）；
var oneDay=24*60*60*1000；//小时*分钟*秒*毫秒
var diffDays=Math.round（Math.abs（（endDate.getTime（）-startDate.getTime（））/（oneDay））；
如果（天数>30天）{
datepicker.up（'form'）.down（'[name=text]'）.hide（）；
}否则{
datepicker.up（'form'）.down（'[name=text]'）.show（）；
}
}
}
}, {
标题：“结束日期”，
边距：“0200”，
项目：{
xtype:'日期选择器'，
itemId:'endDate'，
值：Ext.Date.add（new Date（），Ext.Date.DAY，-1），
今日秀：假，
处理程序：函数（日期选择器，endDate）{
var startDate=datepicker.up（'form'）.down（'#startDate'）.getValue（）；
var oneDay=24*60*60*1000；//小时*分钟*秒*毫秒
var diffDays=Math.round（Math.abs（（endDate.getTime（）-startDate.getTime（））/（oneDay））；
如果（天数>30天）{
datepicker.up（'form'）.down（'[name=text]'）.hide（）；
}否则{
datepicker.up（'form'）.down（'[name=text]'）.show（）；
}
}
},
},
{
xtype:'容器'，
布局：“hbox”，
项目：[{
边距：“0200”，
项目：{
xtype:'textfield'，
名称：“文本”
}
}]
}],
renderTo:Ext.getBody（）
});
}
});

请提供任何帮助我是ExtJS新手谢谢它对我有用但之前我有一个处理程序用于我的两个日期选择器如何将它们包括到当前侦听器“处理程序：函数（选择器，日期）{var timeIntervalPanel=this.up（'按钮#timeIntervalPanel'））；var endDate=timeIntervalPanel.endDate；timeIntervalPanel.setDates（日期，endDate）；}”我已将其更改为handler。只需将侦听器替换为handler并删除select属性，然后将函数直接分配给handler。如何仅启用和禁用而不是隐藏字段，您可以帮助我吗？我们有
enable（）
和
disable（）