Как ограничить диапазон времени выбора в Ionic?

Question

Я пытаюсь создать форму в своем мобильном приложении, где пользователь должен указать время начала и окончания для своего бронирования.Я хочу ограничить временной интервал, который может выбрать пользователь, предполагая, что определенное заведение может разрешить резервирование только в часы его работы (например, с 10:00 до 9:00 вечера).

К сожалению, этого нельзя достичь с помощью ion-datetime.Есть ли что-нибудь еще, что я могу сделать?

Answer 1

Это возможно при использовании ion-datetime, если вы разбили выбор даты и времени на отдельные поля, одно для даты и одно для времени начала и окончания, как указано ниже, обратите внимание на использование атрибутов min и max дляпределы:

      <ion-item>
        <ion-label>Date</ion-label>
        <ion-datetime [(ngModel)]="date" display-format="YYYY-MM-DD">
        </ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label>Start Time</ion-label>
        <ion-datetime [(ngModel)]="startTime" display-format="HH:mm" min="10:00" max="21:00">
        </ion-datetime>
      </ion-item>
      <ion-item>
        <ion-label>End Time</ion-label>
        <ion-datetime [(ngModel)]="endTime" display-format="HH:mm" min="10:00" max="21:00">
        </ion-datetime>
      </ion-item>

Затем вы можете присоединить их к компоненту перед отправкой формы, если вы хотите сохранить их как одно значение, это можно сделать с помощью простой конкатенации строк - reservation = ${this.date} ${this.startTime}-${this.endTime} // YYYY-MM-DD HH:mm-HH:mm, поскольку возвращаемое значениестрока.Или используйте момент , чтобы сделать что-то более сложное.