時間の入力ができない選択フィールドを作成する現在のコンピュータ時間より前

Question

最初のフィールドにコンピュータの現在時刻より前の時刻を選択できない方法はありますか？

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

これは私の現在のコードであると私はそれがコンピュータ時間、それはないのphp javascriptのでなければなりません私のサーバー時刻に基づいてしたいので、私は思います。

私は現在2つの選択フィールドを持っています。最初の時間は私のピックアップ時間です。これは、ユーザーが時間帯に基づいて現在の時間より早く何かを選択できないようにするためのものです。私はピックアップができるように早くも早いピックアップを8時に全部同じにしたい。

私は彼の理に適っています。

Answer 1

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

<script> 
    window.onload = function() { 
    var currentdate = new Date(); 
    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'; 
     } 
     } 
    }); 
    } 

    function updateCloseTime(PickupTime) { 
    var PickupTimeValueSplit = 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> 

Answer 2

最初selectボックスのオプションを反復処理すると、彼らは希望の時間を超えた場合は、trueに自分disabledプロパティを設定する必要があります。

window.addEventListener('DOMContentLoaded', function() { 
 
    var now = new Date('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><select name='PickupTime' required> 
 
    <option value='' selected='selected'>(Select a Time)</option> 
 
    <option value='08:00:00'>8:00 AM</option> 
 
    <option value='08:30:00'>8:30 AM</option> 
 
    <option value='09:00:00'>9:00 AM</option> 
 
    <option value='09:30:00'>9:30 AM</option> 
 
    <option value='10:00:00'>10:00 AM</option> 
 
    <option value='10:30:00'>10:30 AM</option> 
 
    <option value='11:00:00'>11:00 AM</option> 
 
    <option value='11:30:00'>11:30 AM</option> 
 
    <option value='12:00:00'>12:00 PM</option> 
 
    <option value='12:30:00'>12:30 PM</option> 
 
    <option value='13:00:00'>1:00 PM</option> 
 
    <option value='13:30:00'>1:30 PM</option> 
 
    <option value='14:00:00'>2:00 PM</option> 
 
</select> 
 
<label>What is the latest Pickup time?</label><select name='CloseTime' required> 
 
    <option value='' selected='selected'>(Select a Time)</option> 
 
    <option value='10:00:00'>10:00 AM</option> 
 
    <option value='10:30:00'>10:30 AM</option> 
 
    <option value='11:00:00'>11:00 AM</option> 
 
    <option value='11:30:00'>11:30 AM</option> 
 
    <option value='12:00:00'>12:00 PM</option> 
 
    <option value='12:30:00'>12:30 PM</option> 
 
    <option value='13:00:00'>1:00 PM</option> 
 
    <option value='13:30:00'>1:30 PM</option> 
 
    <option value='14:00:00'>2:00 PM</option> 
 
    <option value='14:30:00'>2:30 PM</option> 
 
    <option value='15:00:00'>3:00 PM</option> 
 
    <option value='15:30:00'>3:30 PM</option> 
 
    <option value='16:00:00'>4:00 PM</option> 
 
    <option value='16:30:00'>4:30 PM</option> 
 
</select>