Create A Select Field With Time Entries That Can't Be Before Current Computer Time

Is there any way to add to the first field that they can't choose a time that is BEFORE their computer's current time? What is the earliest Pickup time?&

Solution 1:

<label>What is the earliest Pickup time?</label><selectname='PickupTime'id="PickupTime"onChange="updateCloseTime(this)"required><optionvalue=''selected='selected'>(Select a Time)</option><optionvalue='08:00:00'>8:00 AM</option><optionvalue='08:30:00'>8:30 AM</option><optionvalue='09:00:00'>9:00 AM</option><optionvalue='09:30:00'>9:30 AM</option><optionvalue='10:00:00'>10:00 AM</option><optionvalue='10:30:00'>10:30 AM</option><optionvalue='11:00:00'>11:00 AM</option><optionvalue='11:30:00'>11:30 AM</option><optionvalue='12:00:00'>12:00 PM</option><optionvalue='12:30:00'>12:30 PM</option><optionvalue='13:00:00'>1:00 PM</option><optionvalue='13:30:00'>1:30 PM</option><optionvalue='14:00:00'>2:00 PM</option></select><label>What is the latest Pickup time?</label><selectname='CloseTime'id="CloseTime"required><optionvalue=''selected='selected'>(Select a Time)</option><optionvalue='10:00:00'>10:00 AM</option><optionvalue='10:30:00'>10:30 AM</option><optionvalue='11:00:00'>11:00 AM</option><optionvalue='11:30:00'>11:30 AM</option><optionvalue='12:00:00'>12:00 PM</option><optionvalue='12:30:00'>12:30 PM</option><optionvalue='13:00:00'>1:00 PM</option><optionvalue='13:30:00'>1:30 PM</option><optionvalue='14:00:00'>2:00 PM</option><optionvalue='14:30:00'>2:30 PM</option><optionvalue='15:00:00'>3:00 PM</option><optionvalue='15:30:00'>3:30 PM</option><optionvalue='16:00:00'>4:00 PM</option><optionvalue='16:30:00'>4:30 PM</option></select><script>window.onload = function() {
    var currentdate = newDate();
    var datetime = currentdate.getHours() + "" + currentdate.getMinutes() + "" + currentdate.getSeconds();
    var selectPickupTime = document.getElementById("PickupTime");
    var optionsList = Array.prototype.slice.call(selectPickupTime.options);
    optionsList.forEach(function(element, index, array) {
      if (element.value) {
        if (Number(element.value.replace(/:/g, "")) < Number(datetime)) {
          selectPickupTime.options[index].style.display = 'none';
        } else {
          selectPickupTime.options[index].style.display = 'block';
        }
      }
    });
  }

  functionupdateCloseTime(PickupTime) {
    varPickupTimeValueSplit = PickupTime.value.split(":");
    PickupTimeValueSplit[0] = Number(PickupTimeValueSplit[0]) + 2;
    var valueToFind = PickupTimeValueSplit.join(":");
    var selectCloseTime = document.getElementById("CloseTime");
    var optionsList = Array.prototype.slice.call(selectCloseTime.options);
    optionsList.forEach(function(element, index, array) {
      if (element.value) {
        if (Number(element.value.replace(/:/g, "")) < Number(valueToFind.replace(/:/g, ""))) {
          selectCloseTime.options[index].style.display = 'none';
        } else {
          selectCloseTime.options[index].style.display = 'block';
        }
      }
    });

  }

</script>

Solution 2:

You should iterate over the options of the first select box and set their disabled property to true if they exceed the wanted time.

window.addEventListener('DOMContentLoaded', function() {
    var now = newDate('09/30/2016 12:12:23'),
        hours = now.getHours(),
        minutes = now.getMinutes(),
        pickup = document.querySelector('[name="PickupTime"]'),
        close = document.querySelector('[name="CloseTime"]');
  
    Array.apply(null, pickup.options)
         .forEach(function(option){
            var parts = option.value.split(':'),
                h = +parts[0],
                m = +parts[1];
      
            if (hours > h  || (hours == h && minutes > m)){
              option.disabled = true;
            }
         });
  
});

<label>What is the earliest Pickup time?</label><selectname='PickupTime'required><optionvalue=''selected='selected'>(Select a Time)</option><optionvalue='08:00:00'>8:00 AM</option><optionvalue='08:30:00'>8:30 AM</option><optionvalue='09:00:00'>9:00 AM</option><optionvalue='09:30:00'>9:30 AM</option><optionvalue='10:00:00'>10:00 AM</option><optionvalue='10:30:00'>10:30 AM</option><optionvalue='11:00:00'>11:00 AM</option><optionvalue='11:30:00'>11:30 AM</option><optionvalue='12:00:00'>12:00 PM</option><optionvalue='12:30:00'>12:30 PM</option><optionvalue='13:00:00'>1:00 PM</option><optionvalue='13:30:00'>1:30 PM</option><optionvalue='14:00:00'>2:00 PM</option></select><label>What is the latest Pickup time?</label><selectname='CloseTime'required><optionvalue=''selected='selected'>(Select a Time)</option><optionvalue='10:00:00'>10:00 AM</option><optionvalue='10:30:00'>10:30 AM</option><optionvalue='11:00:00'>11:00 AM</option><optionvalue='11:30:00'>11:30 AM</option><optionvalue='12:00:00'>12:00 PM</option><optionvalue='12:30:00'>12:30 PM</option><optionvalue='13:00:00'>1:00 PM</option><optionvalue='13:30:00'>1:30 PM</option><optionvalue='14:00:00'>2:00 PM</option><optionvalue='14:30:00'>2:30 PM</option><optionvalue='15:00:00'>3:00 PM</option><optionvalue='15:30:00'>3:30 PM</option><optionvalue='16:00:00'>4:00 PM</option><optionvalue='16:30:00'>4:30 PM</option></select>