我正在实现一个场景,用户将选择商店的营业时间和关闭时间。我想确保关闭时间总是大于打开时间。用户将选择时间如下
周一开周一关 上午 8:00 下午 5:00
我想确保关闭时间在逻辑上是正确的。
我使用的是时间输入类型。
我的代码如下
<div class="working-hours">
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Monday Open</label>
<input type="time" name="mondayopentime" class="form-control monday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Monday Close</label>
<input type="time" name="mondayclosingtime" class="form-control monday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group mt-4-c">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="1" id="monday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group mt-4-c">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="1" id="mon_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Tuesday Open</label>
<input type="time" name="tuesdayopentime" class="form-control tuesday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Tuesday Close</label>
<input type="time" name="tuesdayclosingtime" class="form-control tuesday" />
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="2" id="tuesday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="2" id="tue_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Wednesday Open</label>
<input type="time" name="wednesdayopentime" class="form-control wednesday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Wednesday Close</label>
<input type="time" name="wednesdayclosingtime" class="form-control wednesday" />
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="3" id="wednesday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="3" id="wed_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Thursday Open</label>
<input type="time" name="thursdayopentime" class="form-control thursday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Thursday Close</label>
<input type="time" name="thursdayclosingtime" class="form-control thursday" />
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="4" id="thursday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="4" id="thurs_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Friday Open</label>
<input type="time" name="fridayopentime" class="form-control friday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Friday Close</label>
<input type="time" name="fridayclosingtime" class="form-control friday" />
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="5" id="friday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="5" id="fri_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Saturday Open</label>
<input type="time" name="saturdayopentime" class="form-control saturday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Saturday Close</label>
<input type="time" name="saturdayclosingtime" class="form-control saturday" />
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="6" id="saturday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="6" id="sat_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-3">
<div class="form-group">
<label>Sunday Open</label>
<input type="time" name="sundayopentime" class="form-control sunday" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Sunday Close</label>
<input type="time" name="sundayclosingtime" class="form-control sunday" />
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="hours[]" class="form-check-input filled-in" value="7" id="sunday">
<label class="form-check-label">24 Hours</label>
</div>
</div>
</div>
<div class="col-md-3 mt-4-c">
<div class="form-group">
<div class="form-check">
<input type="checkbox" name="closed[]" class="form-check-input filled-in" value="7" id="sun_c">
<label class="form-check-label">Closed</label>
</div>
</div>
</div>
</div>
</div>
我如何确保如果用户选择星期一开放时间为上午 9 点,那么在星期一关闭时间选项中,它必须使用 jquery 大于上午 9 点?
我想在 Jquery 中实现解决方案。
谢谢
答案 0 :(得分:0)
您可以执行以下操作,但显然您的实现会略有不同:
<div class="form-group">
<label>Monday Open</label>
<input type="time" name="mondayopentime" class="form-control monday"/>
<input type="submit" value="Submit" onclick="myFunc()"/>
</div>
<script>
function myFunc(){
var value = $('.monday').val();
var num = timeStringToFloat(value)
if(num > 9){
console.log("Time should be before 9")
}else{
console.log("OK");
}
}
function timeStringToFloat(time) {
var hoursMinutes = time.split(/[.:]/);
var hours = parseInt(hoursMinutes[0], 10);
var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
return hours + minutes / 60;
}
</script>