我試圖讓日期選擇器與選擇選項一起使用，因此如果用戶選擇的日期不是當前日期，則不會呼叫該函式，因此用戶可以選擇他們想要的任何時間。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Delivery Date:
<input id="datepicker" type="text" name="attributes[Delivery Date]" />
<select id="time1">
<option value="" disabled selected>Select delivery time</option>
<option value="8-10">8:00 AM - 10:00 AM</option>
<option value="13-15">1:00 PM - 3:00 PM</option>
<option value="15-19">3:00 PM - 7:00 PM</option>
</select>
<script>
$(function () {
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: ' 1y',
onSelect: function (dateText, inst) {
var date = $("#datepicker").datepicker('getDate'),
day = date.getDate();
var d2 = new Date();
if (day == d2) {
let element = document.getElementById('select-a-delivery-time');
let validateInterval = (element) => {
let currentDate = new Date();
let currentHour = currentDate.getHours();
for (let opt of element.options) {
let timeOpt = opt.value.split('-');
if (Array.isArray(timeOpt) && timeOpt.length > 1) {
opt.disabled = ( timeOpt[0] <= currentHour && timeOpt[1] > currentHour) ? false : true;
}
}
}
} else {
opt.disabled = false;
}
validateInterval(element);
}
});
});
</script>
uj5u.com熱心網友回復：
你可能在邏輯上有一點缺陷。由于該函式正在禁用元素，因此您需要再次呼叫它以啟用它們：
$(function ()
{
$("#datepicker").datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0,
maxDate: ' 1y',
onSelect: function (dateText, inst)
{
var date = $("#datepicker").datepicker('getDate');
let element = document.getElementById('time1');
let validateInterval = (element) =>
{
let currentDate = new Date();
let currentHour = currentDate.getHours();
let isToday = currentDate.getFullYear() == date.getFullYear()
&& currentDate.getMonth() == date.getMonth()
&& currentDate.getDate() == date.getDate();
let first = null;
for (let opt of element.options)
{
if (!opt.value) continue;
let timeOpt = opt.value.split('-');
opt.disabled = isToday && ( timeOpt[0] > currentHour || timeOpt[1] < currentHour);
if (!opt.disabled && first === null) //preselect first available
first = element.value = opt.value;
}
};
validateInterval(element);
}
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Delivery Date:
<input id="datepicker" type="text" name="attributes[Delivery Date]" />
<select id="time1">
<option value="" disabled>Select delivery time</option>
<option value="8-10">8:00 AM - 10:00 AM</option>
<option value="13-15">1:00 PM - 3:00 PM</option>
<option value="15-19">3:00 PM - 7:00 PM</option>
<option value="0-23">0:00 AM - 23:00 PM</option>
</select>
<script>
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/485392.html