1. 首页
  2. 问答
  3. 创建一个选择字段，其中不能有时间条目在当前计算机时间之前

创建一个选择字段，其中不能有时间条目在当前计算机时间之前

2016-09-29 49 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

相关问题

 相关问题