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

Question

如何从 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'
            }
        }

Answer 1

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

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

希望能帮到您解决问题。

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

Answer 2

您可以监听两个日期选择器的 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：

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({
      name: 'Fiddle',

      launch: function() {
        Ext.create('Ext.form.Panel', {
            title: 'Simple Form',
            // The fields
            items: [{
                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,
                  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();
                       }
                     }
                   
                }
                }, {

                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,
                  handler: function(datepicker, endDate) {

                       var startDate = datepicker.up('form').down('#startDate').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();
                       }
                     }
                   
                },
                },
                {
                  xtype: 'container',
                  layout: 'hbox',
                  items: [{
                    margin: '0 20 0 0',
                    items: {
                      xtype: 'textfield',
                      name: 'text'

                    }
                  }]
                }],
              renderTo: Ext.getBody()
            });
        }
      });

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css">
<script type="text/javascript"  src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>

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

hide textfield based on date difference in extjs

extjs

extjs4

extjs4.2