如何在离子日期时间中设置最小和最大时间

Question

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

中的最小-最大时间

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

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

Answer 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

Answer 2

试试这个：

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

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

Homepage.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'];

结果

演示 Link:

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

Answer 3

请试试这个

html代码

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

ts 代码

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

Answer 4

我尝试了这种方法，在破解 6-7 天后破解了我的错误。在我的例子中，我必须在结帐时将 getMinimum 值作为最短时间传递。所以用户在check-in时间之前应该不能check-out。

.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 日期时间格式作为其值”。 Link: ion-datetime: Ionic API 日期时间格式选择器的输入

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

“必须准确显示此处显示的组件，并带有准确的标点符号”Link：https://www.w3.org/TR/NOTE-datetime

如何在离子日期时间中设置最小和最大时间

How to set minimum and max times in an ion-datetime

ionic-framework

ionic4