离子3从所选日期开始设定日期

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了离子3从所选日期开始设定日期相关的知识,希望对你有一定的参考价值。

在我的项目中,我需要显示孩子接种疫苗的日期。例如,如果用户选择日期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>
答案

你可以使用ionChangeion-datetime事件来做到这一点。根据所选日期将即将到来的3天添加到另一个数组并循环播放html,如下所示。

TS

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

HTML

<ion-content padding>
  <h2>Date of vaccinations of child</h2>
  <ion-item>
    <ion-label floating>Date</ion-label>
      <ion-datetime [(ngModel)]="selectedDate"  displayFormat="DD/MMMM/YYYY" min="2010" max="2050-10-31" (ionChange)="onDateChange()"> 
    </ion-datetime>
</ion-item>

<div style="margin-top: 25px;" *ngIf="selectedDate"> 
  <div *ngFor="let commingDate of upcomingDates">
    <p>{{commingDate.time }} : {{commingDate.date | date}}</p>
  </div>
</div>
</ion-content>

找工作StackBlitz Demo Here

以上是关于离子3从所选日期开始设定日期的主要内容,如果未能解决你的问题,请参考以下文章

从选定的月历日期获取星期

如何从所选键再次迭代python dict?

FSCalendar - 从选定的日期创建 segue 到另一个视图控制器

Jquery datepicker下拉列表显示当前日期而不是所选日期

片段 - 带有 DatePickerDialog 片段的 EditText

sqlplus 从所选结果中选择