angular - 时间选择器检查大于
问题描述
我尝试实施时间检查，但我不知道该怎么做。我有 3 个营业时间的店铺，本例营业时间：- 营业时间 1. 营业时间 08:30 营业时间 12:30 营业时间 2. 营业时间 14:30 营业时间 17:30 营业时间 3. 营业时间 20: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; "> </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"> </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);
}
解决方案
主页.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!!");
}
}
}
}
`
推荐阅读
- javascript - 关于 Angular6+ 文件管理器或面临的挑战？
- cobol - GnuCOBOL 报告编写器：语法错误，意外 IS，期待 LEADING 或 TRAILING
- python-3.x - 如何使用python中的正则表达式获取随图像路径一起出现的文本？
- php - 通过安全登录网站 ex(Curl) php 抓取数据
- python - 在 np.nan 之后将 DataFrame 转换回整数？
- java - PostgreSQL 手动插入记录 vs Spring JPA Save with sequence
- groovy - 如何在另一个 groovy 文件中包含一个 groovy 脚本（带有类、函数）？
- windows - 更新windows服务环境变量
- c# - 捕获全屏游戏时性能低下
- django - 姜戈。如何减少每次使用后的优惠券总数