Estoy tratando de hacer que el selector de fechas funcione con las opciones de selección, por lo que si el usuario selecciona una fecha que no es la fecha actual, no se llamará a la función para que el usuario pueda seleccionar en cualquier momento que desee.
<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>Puede que tengas un pequeño defecto en la lógica. Dado que la función está deshabilitando elementos, deberá volver a llamarla para habilitarlos:
$(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>