时间和日期选择器(Javascript/PHP)

Time and Date picker (Javascript/PHP)

本文关键字：PHP Javascript 日期 选择器 时间      更新时间：2023-09-26

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

第一个HTML选择输入将有今天和明天(今天选择作为页面加载的默认值)。第二个HTML选择输入将以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/

我会考虑一下Moment JS，这是一个为操作日期/时间数据而构建的javascript库。如果您能够使用它，您的解决方案可以像以下这样简单:

//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);
}
<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>

基本上，循环开始时要求Moment在小时开始时实例化一个变量'timeIncrement'。我们循环的条件是确保timeIncrement仍然在一天结束之前，并且在每次循环之后，它增加i -我们为每个选项提供一个顺序的"value"属性的变量。然后每次迭代执行以下操作:

  • 在timeIncrement变量中增加30分钟。
  • 它以i为值创建一个新选项，并将timeIncrement变量的格式化字符串版本作为显示字符串。
  • 将该选项添加到选择器中。

我认为你尝试的方法是好的。而不是添加外部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>

我只是保留了之前的答案，因为其他人可能只需要这个循环。在这个答案中，我添加了快速的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>
相关文章：