how do I enable all options when user selects a date that is not the current date?-CodePudding

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>

CodePudding user response：

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();

        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>