Выбор времени и даты (Javascript/PHP)

Question

Мне отчаянно нужен способ реализовать день и время, используя PHP или Javascript или и то, и другое.

Первый вход для выбора HTML будет иметь «Сегодня и завтра» (сегодня выбрано по умолчанию при загрузке страницы). Второй вход для выбора HTML будет иметь время, указанное с интервалом в 30 минут. Отображаемое время должно относиться к текущему времени i.e, если текущее время равно 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

Я просто продолжал предыдущий ответ вызывают другие люди, возможно, просто нужно это цикл. В этом ответе я добавил функцию быстрого 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> 

Answer 2

Я хотел бы рассмотреть глядя в Moment JS, библиотека Javscript построен для работы с данными о дате/времени. Если вы можете использовать его, ваше решение может быть столь же просто, как:

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

В принципе, цикл начинается, задавая момент, чтобы создать экземпляр переменной, «TimeIncrement» в начале час. Условие для нашего цикла состоит в том, чтобы убедиться, что timeIncrement еще до конца дня, и после каждого цикла он увеличивает i - переменную, которую мы сделали, чтобы дать каждой опции атрибут «value». Затем каждая итерация выполняется следующим образом:

• Это добавляет тридцать минут к нашей переменной времени.
• Он создает и новую опцию с i в качестве значения и форматированную строку версии нашей переменной timeIncrement в качестве строки отображения.
• Он добавляет эту опцию в селектор.

Answer 3

Я думаю, что подход, который вы пробовали, хорош. Вместо добавления внешней библиотеки 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>