I am trying to get the datepicker to work with the select options, so if the user selects a date that's not the current date, then the function will not be called so the user can select any time they want.
<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>
You may have a little flaw in the logic. Since the function is disabling elements, you will need call it again to enable them:
$(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();
element.value = ""; //remove selection
for (const opt of element.options)
{
if (!opt.value) continue;
const timeOpt = opt.value.split('-');
opt.disabled = isToday && (+timeOpt[0] > currentHour || +timeOpt[1] <= currentHour);
if (!opt.disabled && element.value == "") //pre-select first available
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>