使用jquery显示错误消息，如果所选时间介于下拉列表中给定的时间范围内
使用jquery显示错误消息，如果所选时间介于下拉列表中给定的时间范围内
提问于 2017-07-12 08:39:12
需要显示错误消息，如果选择的时间范围是从下拉之间的当前时间。
我有一个数据交换和交付time.For交付时间，我已经给出了一些时间范围，比如10-1，1-4，4-7，7-10。如果用户选择了今天的日期，时间是1-4，那么它应该显示一个验证消息，就像无法使用时隙一样。
数据报务员：
<div><label class="delivery_date_label">' . __( "Delivery Date" ) . ': </label>
<input type="text" id="delivery_calender_lite" name="delivery_calender_lite" class="delivery_calender_lite" style="cursor: text!important;margin-bottom:10px;" readonly/>
</div>时间选择者：
<div><label class="delivery-hours">' . __( "Delivery Time" ) . ': </label>
<select id="delivery-hours" class="delivery-hours" name="delivery_hour" >
<option value="">'.__("Choose an hour").'</option>
<option value="10am-1pm">10AM-1PM</option>
<option value="1pm-4pm">1PM-4PM</option>
<option value="4pm-7pm">4PM-7PM</option>
<option value="7pm-10pm">7PM-10PM</option>
</select>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2017-07-12 10:11:59
试试这个，我想这个会管用的。但是您必须使用jQuery。我在它中使用了bootstrap date picker，但我认为它只会很好地与您的插件作为well.cheers..！
Stack Overflow用户
发布于 2017-07-12 09:20:41
这里我给出了我以前的解决方案和看看这个。但是您需要将选择下拉值转换为小时，并将其与当前时间进行比较！如果您提供了更多关于插件的详细信息，这将有助于解决这个问题。
Stack Overflow用户
发布于 2017-07-12 10:32:57
在这里，我给出了完整的解决方案。看看这个。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="validDate()">
<div class="form-group">
<p>Date<span>*</span></p>
<input type="date" name="date" id="date" class="form-control input-sm " required />
</div>
<div>
<div>
<label id="time" class="delivery-hours">Delivery Time</label>
<select id="delivery-hours" class="delivery-hours" name="delivery_hour" >
<option value="">Choose an hour</option>
<option value="10am-1pm">10AM-1PM</option>
<option value="1pm-4pm">1PM-4PM</option>
<option value="4pm-7pm">4PM-7PM</option>
<option value="7pm-10pm">7PM-10PM</option>
</select>
</div>
</div>
<script>
function validDate(){
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("date")[0].setAttribute('min', today);
}
$(document).ready(function(){
$("#delivery-hours").on("change",function(e){
var userdate = new Date($("#date").val());
var currentDate = new Date();
var userdateString = userdate.getFullYear() +"-"+(userdate.getMonth()+1)+"-"+userdate.getDate();
var currentDateString = currentDate.getFullYear() +"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate();
if(userdateString == currentDateString){
var userTime = $("#delivery-hours").val().split("-");
var minTime = parseInt(userTime[0].replace ( /[^\d.]/g, '' ));
var maxTime = parseInt(userTime[1].replace ( /[^\d.]/g, '' ));
if(userTime[0].indexOf("pm") >=1 ){
minTime = minTime + 12;
}
if(userTime[1].indexOf("pm") >= 1){
maxTime = maxTime + 12;
}
if(currentDate.getHours() > minTime && currentDate.getHours() > maxTime)
alert("slot not avilable");
}
});
});
</script>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45052586
复制相关文章
相似问题
腾讯云开发者
