extjsの日付の違いに基づいてテキストフィールドを非表示にする

Question

extjs date pickerから選択した日付範囲に基づいてテキストフィールドを非表示にする方法はありますか？開始日と終了日の差が30日を超える場合は、テキストフィールドを非表示にする必要があります。 ExtJSので

 { 
      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

ここDate singletone classを持って、私は小さなデモを作成している2日付

BWの差を計算する方法です。あなたはそれがどのように動作しているかを見ることができます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イベントに耳を傾け、&を取得し、両方の日付の差を見つけて、それに応じてテキストフィールドを非表示にすることができます。

handlerを使用して

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({ 
 
     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>