时间选择器检查大于答案

【问题标题】：time picker checking greater than时间选择器检查大于
【发布时间】：2023-03-08 04:02:01
【问题描述】：

我尝试实施时间检查，但我不知道该怎么做。我有 3 个营业时间的商店，这个示例营业时间：- 营业时间 1. 08:30 开放，12:30 关闭营业时间 2. 14:30 开放，17:30 关闭营业时间3. 20:30开门，23:30关门

所以我想让检查打开不能大于关闭。运行时间 1 不能大于运行时间 2，以此类推。这是我的stackblitz 演示代码

你们能不能给我看看干净的方法

HTML

<ion-content padding>
  <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: black; ">&nbsp;</ion-label>
            </ion-col>
            <ion-col size="3">
                <ion-label class="black">Open</ion-label>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> &nbsp;</ion-label>
                </ion-col>
                <ion-col size="3">
                    <ion-label class="black">Close</ion-label>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: black; ">Hour Range 1:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="date-range" displayFormat="HH:mm" [(ngModel)]="open" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="date-range" (ionChange)="setDate()" displayFormat="HH:mm" [(ngModel)]="closed" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: black; ">Hour Range 2:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="date-range" (ionChange)="setDate()" displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="open2" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="date-range" (ionChange)="setDate()" displayFormat="HH:mm"  pickerFormat="HH:mm" [(ngModel)]="closed2" min="15:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: black; ">Hour Range 3:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="date-range" (ionChange)="setDate()" displayFormat="HH:mm" [(ngModel)]="open3" min="17:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Open "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="date-range" (ionChange)="setDate()" displayFormat="HH:mm" [(ngModel)]="closed3" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Closed "></ion-datetime>
                </ion-col>
        </ion-row>

</ion-content>

组件

setDate() {
    console.log(this.open);
  
  }

【问题讨论】：

标签： angular typescript ionic-framework datepicker

【解决方案1】：

home.html

<ion-row style="margin-top: 20px; ">
            <ion-col size="4">
                <ion-label style="color: black; ">Hour Range 1:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="date-range" (ionChange)="setDate(1)" displayFormat="HH:mm" [(ngModel)]="open" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="date-range" (ionChange)="setDate(1)" displayFormat="HH:mm" [(ngModel)]="closed" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: black; ">Hour Range 2:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="date-range" (ionChange)="setDate(2)" displayFormat="HH:mm" pickerFormat="HH:mm" [(ngModel)]="open2" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="date-range" (ionChange)="setDate(2)" displayFormat="HH:mm"  pickerFormat="HH:mm" [(ngModel)]="closed2" min="15:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Select time "></ion-datetime>
                </ion-col>
        </ion-row>
        <ion-row style="margin-top: 20px; ">
           
            <ion-col size="4">
                <ion-label style="color: black; ">Hour Range 3:</ion-label>
            </ion-col>
            <ion-col size="3">
                 <ion-datetime class="date-range" (ionChange)="setDate(3)" displayFormat="HH:mm" [(ngModel)]="open3" min="17:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Open "></ion-datetime>
            </ion-col>
                <ion-col size="1">
                    <ion-label class="black"> To</ion-label>
                </ion-col>
                <ion-col size="3">
                        <ion-datetime class="date-range" (ionChange)="setDate(3)" displayFormat="HH:mm" [(ngModel)]="closed3" min="09:00" max="23:00" hourValues="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,0 " minuteValues="0,30 " placeholder="Closed "></ion-datetime>
                </ion-col>
        </ion-row>
`

home.ts
`
setDate(selectorNumber) {
    let minDate = new Date();
    let maxDate = new Date();
    if (selectorNumber == 1) {
      if (this.open && this.closed) {
        minDate.setHours(this.open.split(":")[0], this.open.split(":")[1], 0);
        maxDate.setHours(
          this.closed.split(":")[0],
          this.closed.split(":")[1],
          0
        );
        if (minDate > maxDate) {
          alert("Closed time is smaler then open time!!");
        }
      }
    }
    if (selectorNumber == 2) {
      if (this.open2 && this.closed2) {
        minDate.setHours(this.open2.split(":")[0], this.open2.split(":")[1], 0);
        maxDate.setHours(
          this.closed2.split(":")[0],
          this.closed2.split(":")[1],
          0
        );
        if (minDate > maxDate) {
          alert("Closed time is smaler then open time!!");
        }
      }
    }
    if (selectorNumber == 3) {
      if (this.open3 && this.closed3) {
        minDate.setHours(this.open3.split(":")[0], this.open3.split(":")[1], 0);
        maxDate.setHours(
          this.closed3.split(":")[0],
          this.closed3.split(":")[1],
          0
        );
        if (minDate > maxDate) {
          alert("Closed time is smaler then open time!!");
        }
      }
    }
  }
`

【讨论】：

非常感谢您的帮助