当用户选择不是当前日期的日期时，如何启用所有选项？

Question

我正在尝试使DatePicker与Select选项一起使用，因此，如果用户选择不是当前日期的日期，则不会调用该函数，以便用户可以在任何时间选择他们想要的时间。

<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>

Answer 1

逻辑可能有一些缺陷。由于该功能是禁用元素，因此您需要再次调用它以启用它们：

$(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>