离子日期时间的最小/最大小时不起作用

Question

我正在尝试为datepickers实现min和max属性。所以我有两个日期选择器，一个选择开始，另一个选择结束，都选择小时和分钟

<ion-row>
  <ion-col width-45>
    <ion-item>
      <ion-datetime formControlName="start" displayFormat="HH:mm" min="{{minStart}}" max="{{maxStart}}" pickerFormat="HH mm" doneText="Ok" cancelText="Cancelar" (ionChange)="changeHours()"></ion-datetime>
    </ion-item>
  </ion-col>
  <ion-col width-45>
    <ion-item>
      <ion-datetime formControlName="end" displayFormat="HH:mm" min="{{minEnd}}" max="{{maxEnd}}" pickerFormat="HH mm" doneText="Ok" cancelText="Cancelar" (ionChange)="changeHours()"></ion-datetime>
    </ion-item>
  </ion-col>
</ion-row>

在我的ts文件中，我具有changeHours()用于更新最小值和最大值的变量，而我Moment.js用于创建和操作日期

minDate: string = Moment().toDate().toISOString(); // i'm using this for other stuff too
minStart: string = Moment().toDate().toISOString();
maxStart: string = Moment().toDate().toISOString();
minEnd: string = Moment().toDate().toISOString();
maxEnd: string = Moment().format('YYYY-MM-DDT') + '23:59';

changeHours() {
    let start= this.novoAtendimento.get('start').value;
    let end= this.novoAtendimento.get('end').value;

    if (ini != null && term == null) {
        this.minEnd= Moment(this.minDate).format('YYYY-MM-DDT') + start; //output is '2017-02-23T05:00' if i choose 05 00 in the picker
    } else {
        this.maxStart= Moment(this.minDate).format('YYYY-MM-DDT') + end;
    }
}

所以这基本上就是我所拥有的，我也只尝试了小时和分钟的HH:mm格式，并且HH mm（我知道它不是ISO 8601格式，但是尝试也没有什么坏处）。

我见过一个人通过选择器组件对其进行更新，以使用他想要的值创建自定义选择器，但是我认为这是一种丑陋的方式，因为我可以拥有min / max属性。考虑到这是一个动态字段，我不想在用户每次更改开始或结束日期时间时都调用一种方法来创建新的选择器（但是，如果这是我将使用此选择器组件的唯一方式）。

因此，如何为我的选择时间创建一个“围栏”，以使用户不能选择小于起始值的最终值，反之亦然？ionic 2 datetime最小值和max只能工作数小时和数分钟吗？

Answer 1

我尝试了这种方法，在粉碎 6-7 天后解决了我的 bug。就我而言，我必须在结帐时传递 getMinimum 值作为最短时间。因此用户不应该在入住时间之前退房。

\n

.ts 文件

\n

check_in_value: 2021-12-06T13:15:11.684Z\nconst a = parseISO(check_in_value);\nconst b = addHours(new Date(a),5);\nthis.getMinimum = b.toISOString()\nconcole.log(this.getMinimum)\n

\n

HTML 文件

\n

\n

<ion-datetime displayFormat="YYYY-MM-DD HH:mm"\npickerFormat="YYYY-MM-DD HH:mm" [value]="check_out"\n[min]="getMinimum3"

\n

\n\n

\n

\n

重要笔记：

\n

显示格式在渲染日期和时间时起着重要作用。仔细阅读文档。\xe2\x80\x9cIonic Framework 使用 ISO 8601 日期时间格式作为其值\xe2\x80\x9d。链接： ion-datetime：日期时间格式选择器的 Ionic API 输入

\n

\xe2\x80\x9c此处显示的组件必须存在，并且具有此标点符号\xe2\x80\x9d 链接：https://ionicframework.com/docs/api/datetime ?_gl=1*1lg7t6u*_ga*MTk3MzQ4NzM5Ny4xNjQxODg2ODQy* _ga_REH9TJF6KF*MTY1MDMyNDM1MS4xMTIuMS4xNjUwMzI2NjU0LjA。

\n

\xe2\x80\x9c此处显示的组件必须存在，并带有此标点符号\xe2\x80\x9d 链接： https: //www.w3.org/TR/NOTE-datetime

\n