使用ion-datetime进行日期验证

Question

In my Ionic form I am loading ion-datetime dynamically. User can choose the dates one by one from 1 to ..n. But the second date must greater than the first one. 3rd date must be greater than both 1st and 2nd dates.

Once fill the date if user change any date in between have to validate. For an example try to change 3rd date less than 4th date.

Can anyone give me a solution ?

Answer 1

make an array that will store all date's - stored as int instead of date (will make it easier to compare) then check if index before exist, if yes then check if int in index before is smaller then check if index after exist if yes then check if it bigger. so lets say i[1] is Your index then i[0] < i[1] < i[2]

Answer 2

You should have to validate 1st date change for 2nd date like:

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] and [max] component inputs

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

You can use min property and ngModel property of ion-datetime as below to fulfil your requirement.

HTML

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

TS

export class HomePage {

  myDate; minDate;

  constructor() {

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

  setDate() {

    this.minDate = this.myDate;
  }
}

Working Demo