如何在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，因为返回值是一个字符串。或者使用moment做更多涉及的事情。