Question

我是离子的新手，并试图计算两个日期之间的差异，这个日期将显示在卡片中。日期选择限制仅限最多7天意味着从日期是25/03/2018，然后到日期是31/03/2018或在此之前。我发现了这样的问题 Display all days(dates) between two dates in angularjs但无法理解如何编写代码。我想尝试像图像一样的屏幕。当我点击+号时，它会打开卡片字段

我只能为日期编写.html文件代码

  <ion-item>
      <ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px">Travel From Date</ion-label>
      <ion-datetime placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="fromdate"> {{date | date:'yyyy-MM-dd'}}</ion-datetime>
   </ion-item>

   <ion-item>
      <ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px">Travel To Date</ion-label>
    <ion-datetime  placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="todate">{{date | date:'yyyy-MM-dd'}}</ion-datetime>
  </ion-item>

请帮帮我

更新

.html文件

   <ion-item>
    <ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px">From Date</ion-label>
    <ion-datetime placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="fromdate" (ionChange)="fromDateChanged($event)">{{date | date:'yyyy-MM-dd'}}</ion-datetime>
  </ion-item>

  <ion-item>
    <ion-label stacked [style.color]="titlelabel" color="titlelabel" style="margin-top:10px">Travel To Date</ion-label>
    <ion-datetime placeholder="dd/mm/yy" displayFormat="DD/MM/YYYY" class="ion-input" [(ngModel)]="todate" (ionChange)="toDateChanged($event)">{{date | date:'yyyy-MM-dd'}}</ion-datetime>
  </ion-item>



  <ion-item-sliding *ngFor="let date of datesForCards">

    <ion-item>

      <ion-card class="ion-card">

        <ion-card-content class="ion-card-content">

          <h5 style="color:red">
            {{date | date:'yyyy-MM-dd'}}

            <ion-icon style="float: right;" ios="ios-add-circle" md="md-add-circle" (click)="onButtonClick()">
            </ion-icon>
          </h5>
        </ion-card-content>
      </ion-card>
    </ion-item>
  </ion-item-sliding>

.ts文件

    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] < to) {
       dates.push(new Date(year, month, ++day));
       console.log(dates);
   }
      return dates;  
  }

当我添加日期时不添加卡片而控制台不会打印任何内容

Answer 1

这是一个粗略的代码来说明这个想法。此代码未经过测试。

<ion-datetime 
    placeholder="dd/mm/yy" 
    displayFormat="DD/MM/YYYY" 
    class="ion-input"
    [ngModel]="fromDate"
    (ngModelChange)="fromDateChanged($event)"> {{date | date:'yyyy-MM-dd'}}</ion-datetime>
<ion-datetime 
    placeholder="dd/mm/yy" 
    displayFormat="DD/MM/YYYY" 
    class="ion-input"
    [ngModel]="toDate"
    (ngModelChange)="toDateChanged($event)"> {{date | date:'yyyy-MM-dd'}}</ion-datetime>
<div *ngFor="date of datesForCards">
    <div>{{date | date:'yyyy-MM-dd'}}</div>
</div>

component.ts

fromDateChanged(fromDate: Date){
    this.datesForCards = [];
    if(this.toDate) {
        this.datesForCards = this.getDatesBetween(fromDate, this.toDate);
    }
}

toDateChanged(fromDate: Date){
    this.datesForCards = [];
    if(this.fromDate) {
        this.datesForCards = this.getDatesBetween(this.fromDate, toDate);
    }
}

getDatesBetween(from: Date, to: Date) : Date[] {
    let year = from.getFullYear();
    let month = from.getMonth();
    let day = from.getDate();
    let dates = [from];
    while(dates[dates.length-1] < to) {
      dates.push(new Date(year, month, ++day));
    }
    return dates;
}

如何显示日期在Ionic 2/3和角度3/4的两个选定日期之间的卡片中

1 个答案: