使用 ion-datetime 进行日期验证答案

【问题标题】：Date validation with ion-datetime使用 ion-datetime 进行日期验证
【发布时间】：2019-03-22 00:18:53
【问题描述】：

在我的 Ionic 表单中，我正在动态加载 ion-datetime。用户可以从 1 到 ..n 逐一选择日期。但第二个日期必须大于第一个。第 3 日期必须大于第 1 和第 2 日期。

如果用户更改其间的任何日期必须验证一次填写日期。例如，尝试将第三个日期更改为小于第四个日期。

谁能给我一个解决方案？

【问题讨论】：

标签： javascript angularjs ionic-framework frameworks

【解决方案1】：

创建一个将存储所有日期的数组 - 存储为 int 而不是日期（将更容易比较）然后检查索引之前是否存在，如果存在则检查 int 之前的索引是否更小然后检查索引是否存在如果是，那么检查它是否更大。所以假设 i[1] 是您的索引，然后 i[0]

【讨论】：

【解决方案2】：

您应该必须验证第二个日期的第一个日期更改，例如：

网址：https://ionicframework.com/docs/api/components/datetime/DateTime/

<ion-col>
    <ion-datetime [min]="minDate" [max]="finishMaxDate" displayFormat="DD-MM-YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="eventData.startEventDate"
      placeholder="From Date" (ngModelChange)="startDateChanged()"></ion-datetime>
</ion-col>
<ion-col>
    <ion-datetime [min]="finishMinDate" [max]="finishMaxDate" displayFormat="DD-MM-YYYY" pickerFormat="DD MM YYYY" [(ngModel)]="eventData.endEventDate"
      placeholder="End Date"></ion-datetime>
</ion-col>

[min] 和 [max] 分量输入

minDate = moment().format('YYYY-MM-DDTHH:mm');
finishMinDate = moment().format('YYYY-MM-DDTHH:mm');
finishMaxDate = moment().add(10, 'years').format('YYYY-MM-DDTHH:mm');


startDateChanged() {

  if (this.eventData.startEventDate != '') {
    this.finishMinDate = moment(this.eventData.startEventDate).format('YYYY-MM-DDTHH:mm');
  }

  if (this.eventData.startEventDate != '' && this.eventData.endEventDate != '') {
    if (this.eventData.startEventDate > this.eventData.endEventDate) {
      this.eventData.endEventDate = moment(this.eventData.startEventDate).format('YYYY-MM-DDTHH:mm');
    } else {
      this.finishMinDate = moment(this.eventData.startEventDate).format('YYYY-MM-DDTHH:mm');
    }
  }
}

【讨论】：

Thanks.for yoir replay bit 我认为在这种情况下不会起作用。一旦我输入最后一个日期示例 6h 日期，现在我尝试修改第二个日期我可以在选择器中看到的开始日期是什么。它属于第 6 个日期选择器吗？

【解决方案3】：

您可以使用ion-datetime 的min 属性和ngModel 属性来满足您的要求。

HTML

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MM/DD/YYYY" 
                [(ngModel)]="myDate" 
                (ionChange)="setDate()" 
                [min]="minDate"></ion-datetime>
</ion-item>

export class HomePage {

  myDate; minDate;

  constructor() {

      this.minDate = '1990-12-31';
  }

  setDate() {

    this.minDate = this.myDate;
  }
}

Working Demo

【讨论】：