如何在 ion-datetime 中设置最小和最大时间答案

【问题标题】：How to set minimum and max times in an ion-datetime如何在 ion-datetime 中设置最小和最大时间
【发布时间】：2022-04-19 08:33:39
【问题描述】：

我正在使用离子 DateTime 组件在我的页面中选择时间。但我必须只允许用户选择从上午 06:30 到下午 7:30 的时间。如何限制 ion-datetime 中的 min-max 时间

我已经尝试过直接给组件赋予最小值。

<ion-datetime displayFormat="hh:mm a" min="minDate"></ion-datetime>

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

您可以将它们指定为道具：

<ion-item>
  <ion-label>Date</ion-label>
  <ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
  </ion-datetime>
</ion-item>

在Min and Max Datetimes 部分检查离子日期时间docs

【讨论】：

【解决方案2】：

试试这个：

我使用了 pickerFormate（24 小时甲酸盐）和 displayValue（12 小时甲酸盐）。和你的逻辑差不多。

主页.html

<ion-item>
    <ion-label>Time</ion-label>
    <ion-datetime  [hourValues]="hourValues" [min]="minTime" [max]="maxTime" displayFormat="hh:mm A" pickerFormat="HH:mm A" (ionFocus)="changeDate($event)"></ion-datetime>
  </ion-item>

主页.ts

myDate: String = new Date().toISOString();
  minTime = '06:30';
  maxTime = '19:30';
  hourValues = ['06','07','08','09','10','11','12','13','14','15','16','17','18','19'];

结果

演示链接：

https://stackblitz.com/edit/github-htjuyr-datepicker

【讨论】：

这样用户只能选择时间 6 :30 - 7:59 Am/pm。没有解决目的
这导致 AM/PM 选择器消失。
是的，我使用 24 小时格式仅用于选择，在选择 AM/PM 后显示值。
有没有办法以 12 小时格式实现它，例如当用户选择 08:30 的时间时，“PM”选择器被禁用（或隐藏）？
我尝试过使用 12 小时格式，但 ionic 库在时间滚动时会产生问题。

【解决方案3】：

请试试这个

html代码

<ion-datetime displayFormat="hh:mm a" [min]="minTime" [max]="maxTime"></ion-datetime>

ts 代码

 minTime = '06:30';
 maxTime = '07:30';

【讨论】：

这样用户将无法选择其他时间，例如 8:30 等。
您可以将 hoursValue 提供给日期选择器，例如跨度>

【解决方案4】：

我尝试了这种方法，在 6-7 天后破解了我的错误。就我而言，我必须在结帐时将 getMinimum 值作为最短时间传递。所以用户应该不能在入住时间之前退房。

.ts 文件

check_in_value: 2021-12-06T13:15:11.684Z
const a = parseISO(check_in_value);
const b = addHours(new Date(a),5);
this.getMinimum = b.toISOString()
concole.log(this.getMinimum)

HTML 文件

<ion-datetime
displayFormat="YYYY-MM-DD HH:mm"
pickerFormat="YYYY-MM-DD HH:mm"
[value]="check_out"
[min]="getMinimum3"
></ion-datetime>

重要提示：

显示格式在呈现日期和时间方面起着重要作用。仔细阅读文档。 “Ionic Framework 使用 ISO 8601 日期时间格式作为其价值”。链接：ion-datetime：日期时间格式选择器的 Ionic API 输入

“此处显示的组件必须存在，并带有该标点符号”链接：https://ionicframework.com/docs/api/datetime?_gl=1*1lg7t6u*_ga*MTk3MzQ4NzM5Ny4xNjQxODg2ODQy*_ga_REH9TJF6KF*MTY1MDMyNDM1MS4xMTIuMS4xNjUwMzI2NjU0LjA。

“这里显示的组件必须存在，并且带有这个标点符号”链接：https://www.w3.org/TR/NOTE-datetime

【讨论】：