title: How to show dates In cards between two selected dates in Ionic 2/3 and angular 3/4
body: <p>I'm very new in ionic, and trying to calculate difference between two dates and this dates will display in cards. dates selection limit is only up-to 7 days means if from date is 25/03/2018 then to date is 31/03/2018 or before to date. I found number of questions like this 
        <a href="https://stackoverflow.com/questions/44624097/display-all-daysdates-between-two-dates-in-angularjs">Display all days(dates) between two dates in angularjs</a> but cant understand how to write code. i'm trying to get screen like in image. and when i click on + sign it opens card fields   <a href="https://i.stack.imgur.com/Iedfo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iedfo.png" alt="enter image description here"></a></p>
  
  <p>I'm able to write only .html file code for dates </p>
  
  <pre><code>  &lt;ion-item&gt;
        &lt;ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px"&gt;Travel From Date&lt;/ion-label&gt;
        &lt;ion-datetime placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="fromdate"&gt; {{date | date:'yyyy-MM-dd'}}&lt;/ion-datetime&gt;
     &lt;/ion-item&gt;
  
     &lt;ion-item&gt;
        &lt;ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px"&gt;Travel To Date&lt;/ion-label&gt;
      &lt;ion-datetime  placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="todate"&gt;{{date | date:'yyyy-MM-dd'}}&lt;/ion-datetime&gt;
    &lt;/ion-item&gt;
  </code></pre>
  
  <p>Please help me</p>
  
  <p>Update:</p>
  
  <p>.html file</p>
  
  <pre><code>   &lt;ion-item&gt;
      &lt;ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px"&gt;From Date&lt;/ion-label&gt;
      &lt;ion-datetime placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="fromdate" (ionChange)="fromDateChanged($event)"&gt;{{date | date:'yyyy-MM-dd'}}&lt;/ion-datetime&gt;
    &lt;/ion-item&gt;
  
    &lt;ion-item&gt;
      &lt;ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px"&gt;Travel To Date&lt;/ion-label&gt;
      &lt;ion-datetime placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="todate" (ionChange)="toDateChanged($event)"&gt;{{date | date:'yyyy-MM-dd'}}&lt;/ion-datetime&gt;
    &lt;/ion-item&gt;
  
  
  
    &lt;ion-item-sliding *ngFor="let date of datesForCards"&gt;
  
      &lt;ion-item&gt;
  
        &lt;ion-card class="ion-card"&gt;
  
          &lt;ion-card-content class="ion-card-content"&gt;
  
            &lt;h5 style="color:red"&gt;
              {{date | date:'yyyy-MM-dd'}}
  
              &lt;ion-icon style="float: right;" ios="ios-add-circle" md="md-add-circle" (click)="onButtonClick()"&gt;
              &lt;/ion-icon&gt;
            &lt;/h5&gt;
          &lt;/ion-card-content&gt;
        &lt;/ion-card&gt;
      &lt;/ion-item&gt;
    &lt;/ion-item-sliding&gt;
  </code></pre>
  
  <p>.ts file</p>
  
  <pre><code>    fromDate: Date;
      toDate: Date;
      datesForCards = [];
  
     fromDateChanged(fromDate: Date) {
         this.datesForCards = [];
         if (this.toDate) {
         this.datesForCards = this.getDatesBetween(fromDate, this.toDate);
         console.log(this.datesForCards);
      }
    }
  
     toDateChanged(toDate: Date) {
          this.datesForCards = [];
          if (this.fromDate) {
          this.datesForCards = this.getDatesBetween(this.fromDate, toDate);
       }
     }
  
    getDatesBetween(from: Date, to: Date): Date[] {
  
      console.log("dates");
      let year = from.getFullYear();
      let month = from.getMonth();
      let day = from.getDate();
      let dates = [from];
      while (dates[dates.length - 1] &lt; to) {
         dates.push(new Date(year, month, ++day));
         console.log(dates);
     }
        return dates;  
    }
  </code></pre>
  
  <p>when i add to date does not add cards and console doesn't print anything</p>