Question

我以离子形式动态加载ion-datetime。用户可以从1到..n一一选择日期。但是第二个日期必须大于第一个。第三个日期必须大于第一个和第二个日期。

如果用户必须更改其间的任何日期，则必须填写日期。例如，尝试将第3个日期更改为小于第4个日期。

谁能给我解决方案？

Answer 1

创建一个数组，该数组将存储所有日期-以int而不是date的形式存储（将使其更易于比较），然后检查是否存在index之前的索引，如果是，则检查inindex之前的int的值是否较小，然后检查是否存在after的索引如果是，则检查它是否更大。因此，假设i [1]是您的索引，然后i [0]

Answer 2

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

URL：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');
    }
  }
}

Answer 3

您可以如下使用min的{{1}}属性和ngModel属性来满足您的要求。

HTML

ion-datetime

TS

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

Working Demo

使用ion-datetime进行日期验证

3 个答案: