Question

我迫切需要一种方法来使用PHP或Javascript或两者来实现日期和时间选择器。

第一个HTML选择输入将具有今天和明天（在页面加载时选择今天作为默认值）。第二个HTML Select Input将按时间间隔列出30分钟。显示的时间应该是相对于当前时间，即如果当前时间是15:00，那么在那之前不显示任何东西，例如14:00。如果用户明天选择，则应显示所有时间。

到目前为止，这是我的代码：

<div class="select-wrapper">
    <select class="form-control" id="" name="" required>
        <option value="0" selected>ASAP</option>
        <?php
        for($hours=$new_time; $hours<23; $hours++) // the interval for hours is '1'
            for($mins=0; $mins<60; $mins+=30) // the interval for mins is '30'
                echo '<option 
             value='.$hours.$mins.'>'.str_pad($hours,2,'0',STR_PAD_LEFT).':'
                .str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';
        ?>
    </select>
</div>

我的代码在10:00到23:00之间循环，并将它们列为选项。任何帮助将不胜感激。

示例= https://deliveroo.co.uk/

Answer 1

我会考虑研究Moment JS，这是一个为操纵日期/时间数据而构建的Javscript库。如果您能够使用它，您的解决方案可以简单：

＆＃13;

//Store the select control element
var selectControl = document.getElementById('thisNeedsAnIdToBeJsSelectable');

//Loop through every half hour
for(var timeIncrement = moment().startOf('hour'), i = 1 /*Put this as 1 because ASAP already takes option 0*/; timeIncrement.isBefore(moment().endOf('day')); i++){
  timeIncrement.add(30, 'minutes')
  var newOption = document.createElement('option');
  newOption.value = i;
  newOption.innerHTML = timeIncrement.format("h:mm a"); //This is a Moment.js time-format value
  selectControl.appendChild(newOption);
}

＆＃13;

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<div class="select-wrapper">
  <select class="form-control" id="thisNeedsAnIdToBeJsSelectable" name="" required>
    <option value="0" selected>ASAP</option>
  </select>
</div>

＆＃13;

基本上，循环首先要求Moment实例化一个变量，＆＃39; timeIncrement＆＃39;在一小时的开始。循环的条件是确保timeIncrement仍然在一天结束之前，并且在每个循环之后它增加i - 我们做的一个变量，给每个选项一个顺序的值＆＃39;属性。然后每次迭代执行以下操作：

我们的timeIncrement变量增加了30分钟。
使用i作为值创建新选项，并将timeIncrement变量的格式化字符串版本作为显示字符串。
它将该选项添加到选择器。

Answer 2

我认为你尝试过的方法很好。您可以尝试使用以下代码来使其工作，而不是添加外部Javascript库。

今天

<div class="select-wrapper">
    <select class="form-control" id="" name="" required>
        <option value="0" selected>ASAP</option>
        <?php
        $initial = strtotime(date('H', time()) . ':00:00');
        for (; $initial < strtotime("23:59:59");  $initial = strtotime("+30 minutes", $initial)) {
          echo '<option value='. date('H:i', $initial) .'>'. date('H:i', $initial).'</option>';
        }
        ?>
    </select>
</div>

明天

<div class="select-wrapper">
    <select class="form-control" id="" name="" required>
        <option value="0" selected>ASAP</option>
        <?php
        $initial = strtotime('12:00:00');
        for (; $initial < strtotime("23:59:59");  $initial = strtotime("+30 minutes", $initial)) {
          echo '<option value='. date('H:i', $initial) .'>'. date('H:i', $initial).'</option>';
        }
        ?>
    </select>
</div>

Answer 3

我只是保留了之前的答案，因为其他人可能只需要那个循环。在这个答案中我添加了快速Javascript函数来切换今天和明天。我想这可能会对你有所帮助。

<label>Day</label><br>
<select  onchange="changeTime(this);">
  <option value="today">Today</option>
  <option value="tomorrow">Tomorrow</option>
</select>
<br>
<br>
<label>Time</label>
<div class="select-wrapper">
    <select class="form-control today" id="" name="" required>
        <option value="0" selected>ASAP</option>
        <?php
        $initial = strtotime(date('H', time()) . ':00:00');
        for (; $initial < strtotime("23:59:59");  $initial = strtotime("+30 minutes", $initial)) {
          echo '<option value='. date('H:i', $initial) .'>'. date('H:i', $initial).'</option>';
        }
        ?>
    </select>
</div>
<div class="select-wrapper">
    <select class="form-control tomorrow" id="" name="" required style="display:none;">
        <option value="0" selected>ASAP</option>
        <?php
        $initial = strtotime('12:00:00');
        for (; $initial < strtotime("23:59:59");  $initial = strtotime("+30 minutes", $initial)) {
          echo '<option value='. date('H:i', $initial) .'>'. date('H:i', $initial).'</option>';
        }
        ?>
    </select>
</div>

<script type="text/javascript">
   function changeTime (obj)
   {
     if(obj.value == 'today') {
        document.getElementsByClassName('today')[0].style.display='block';
        document.getElementsByClassName('tomorrow')[0].style.display='none';
     }
     else{
      document.getElementsByClassName('tomorrow')[0].style.display='block';
      document.getElementsByClassName('today')[0].style.display='none';
     }
   }
</script>

时间和日期选择器（Javascript / PHP）

3 个答案: