CODEWITHSUNDEEP
htmlangulartypescriptionic-framework
Hannah
Hannah

Reputation: 19

How to limit range in time picker in Ionic?

I'm trying to create a form in my mobile app where the user has to submit the start and end time for their reservation. I want to restrict the time range that the user can select, assuming that a certain establishment can only allow reservations within their open hours (ex: 10:00am-9:00pm).

Unfortunately, this cannot be achieved using the ion-datetime. Is there anything else I can do?

Upvotes: 0

Views: 1650

Answers (1)

Simon L. Brazell
Simon L. Brazell

Reputation: 1272

This is possible using ion-datetime if you split the date and times selection into seperate fields, one for date and one for start and end time, as follows, note the use of the min and max attributes for the limits:

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

You can then join them in the component before form submission if you want to store them as one value, this could be done with simple string concatenation - reservation = ${this.date} ${this.startTime}-${this.endTime} // YYYY-MM-DD HH:mm-HH:mm as the return value is a string. Or use moment to do something more involved.

Upvotes: 1

Related Questions