0

I try to implement time checking but I don't have idea how to do it. I 've 3 operation hour shop, this example operation hour:- Operation hour 1. Open 08:30 and closed 12:30 Operation hour 2. open 14:30 and closed 17:30 Operation hour 3. open 20:30 and closed 23:30

So I want to make a checking open cannot greater than close. Operation hour 1 cannot greater than operation hour 2 and so on. this my stackblitz demo code

Can you all show me the clean method

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>

Component

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

1 Answer 1

4

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!!");
        }
      }
    }
  }
`
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.