1. 首頁
  2. 問答
  3. 創建一個選擇字段，其中不能有時間條目在當前計算機時間之前

創建一個選擇字段，其中不能有時間條目在當前計算機時間之前

2016-09-29 52 views
0

是否有任何方法可以添加到第一個字段，以便他們無法選擇計算機當前時間之前的時間？創建一個選擇字段，其中不能有時間條目在當前計算機時間之前

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

這是我當前的代碼，我想是因爲我希望它是基於計算機的時間它是在JavaScript不是PHP不是我的服務器時間。

我目前有2個選擇字段。首先是我的取件時間，這是我希望用戶根據他們的時區不能選擇比當前時間更早的任何內容。我希望最早的皮卡早上8點到達早上皮卡的時間。

我希望他有道理。

來源

2016-09-29 rudtek

+0

的java！= JavaScript的 – Turnip

+0

我很感謝你花時間閱讀整個帖子，並與一個錯字是有幫助的註釋回來的時間。謝謝。請注意它被正確標記，但你可能看到了。 – rudtek

+0

這就是我評論的原因。你標記爲一件事，但提到另一件事。如果您對這種關係感到困惑（因爲許多人都在這樣），您將一直在努力尋找您正在尋找的解決方案。 – Turnip

回答

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>

來源

2016-09-29 21:13:53

+0

這太棒了！謝謝 – rudtek

0

你應該遍歷第一select框的選項及其disabled屬性設置爲true，如果他們超過需要時間。

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>

來源

2016-09-29 22:18:53

+0

是否有理由在回答1中使用此方法？我不想挑剔，我只是不太瞭解JavaScript。 – rudtek

相關問題

 相關問題