Ionic 3从所选日期开始设置日期

时间:2019-02-16 00:01:27

标签: angular ionic-framework ionic3

在我的项目中,我需要显示孩子的疫苗接种日期。例如,如果用户选择日期2/16/2019,则其他3个日期将是5/16 / 2019、7 / 16/2019和9/16/2019。当用户选择一个日期时,其他日期将以2天为间隔显示。

 <ion-content>
     <ion-item>
            <ion-label floating>Date</ion-label>
            <ion-datetime  displayFormat="DD/MMMM/YYYY" min="2010" max="2050-10-31" formControlName="birthday" > //if user example select 2/16/19
            </ion-datetime>
    </ion-item>
    <div> 
        <h1>first vaccine</h1>
        <p> here comes the date of selected date after 2 days</p> //here come 2/18/19
    </div>
</ion-content>

1 个答案:

答案 0 :(得分:1)

您可以使用ionChange的{​​{1}}事件来执行此操作。根据选择的日期,将接下来的3天添加到另一个数组中,并按如下所示循环插入 HTML

TS

ion-datetime

HTML

export class HomePage {

  selectedDate: Date;
  upcomingDates: any[];

  constructor() {}

  onDateChange() {

    let upcomingIteration = ['First', 'Second', 'Third'];
    this.upcomingDates = [];

    for (let i = 1; i < upcomingIteration.length + 1; i++) {
        let tempDate = new Date(this.selectedDate);
        let upcomingDate = tempDate.setDate(tempDate.getDate() + i * 2);
        this.upcomingDates.push({ time: upcomingIteration[i -1], date: new Date(upcomingDate)}); 
    }
    console.log(JSON.stringify(this.upcomingDates, null, 2));
  }
}

找到工作StackBlitz Demo Here