Проверка даты с помощью ion-datetime

Question

В моей ионной форме я загружаю ion-datetime динамически.Пользователь может выбирать даты по одному от 1 до ..n.Но второе свидание должно быть больше первого.3-я дата должна быть больше, чем 1-я и 2-я даты.

Один раз заполните дату, если пользователь должен изменить любую промежуточную дату для подтверждения.Для примера попробуйте изменить 3-ю дату меньше 4-й даты.

Может кто-нибудь дать мне решение?

Answer 1

Вам необходимо подтвердить 1-е изменение даты для 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>

[мин] и [макс] компонентные входы

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 2

Вы можете использовать min свойство и ngModel свойство ion-datetime, как показано ниже, чтобы выполнить ваше требование.

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

Рабочая демоверсия

Answer 3

создайте массив, в котором будут храниться все даты - сохраняются как int вместо даты (упростит сравнение), затем проверяют, существует ли индекс до того, как он существует, если да, тогда проверяют, меньше ли int в индексе до, затем проверяют, если индекс после существуетесли да, то проверьте, больше ли.так скажем, я [1] ваш индекс, то я [0] <я [1] <я [2] </p>