Masquer le champ de texte en fonction de la différence de date dans les extensions

Question

Comment masquer un champ de texte en fonction de la plage de dates sélectionnée dans le sélecteur de date extjs? Je dois cacher le champ de texte si la différence entre la date de début et la date de fin est supérieure à 30 jours.

 { 
      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

En ExtJs ont Date singletone class ici est la méthode pour calculer la différence de poids corporel 2 dates

J'ai créé une petite démo. Vous pouvez voir comment cela fonctionne Sencha Fiddle

Espérons que cela vous aidera à résoudre votre problème.

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

Vous pouvez écouter l'événement select des deux datepicker et obtenir & trouver la différence entre les deux dates et cacher le champ de texte en conséquence.

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

En utilisant 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(); 
       } 
      } 

Exemple de code de travail:

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>