Будущий выбор даты

Question

Я пытаюсь реализовать на своем веб-сайте функцию, которая позволяет пользователю добавлять записи в мою базу данных, а в одной из моих форм пользователю нужно выбрать будущую дату.

Например:

Выбор коробки 1 - день:

<select name="startDay" class="form-control""> 
<option value="Today">Today</option> 
<option value="Tomorrow">Tomorrow</option> 
<option value="In 2 days">In 2 days</option> 
</select> 

**** Выберите окно 2 - час (с 6:00 до 24:30) ** ** Цикл создает параметр только в течение часа, который еще не прошел! , например, если час сейчас 21:00, цикл будет показывать только 21:00, 21:30, 22:00 и т.д ..

<select name="startHour" class="form-control"> 

    <?php 
       for ($i = 6; $i <= 24; $i++){ 
        for ($j=0; $j < 60; $j+=30) { 
         if ($j==0) $show = "00"; else $show="30"; 
         if (date('H') < $i) 
       echo '<option>'.$i.':'.$show.'</option>'; 
       } 
       } 
       ?> 
       </select> 

Моей проблема: Когда пользователь выбирает «Tomorrrow» в первом поле выбора. Он по-прежнему показывает часы, которые не принимаются сегодня. Это означает, что пользователь может выбирать часы только сегодня, даже если он хочет установить новую запись на завтра.

Любые идеи, как исправить это и позволить «Завтра» и выше пользователям выбирать любой час дня?

Answer 1

Вот полное решение:

<select id="startDay" name="startDay" class="form-control"> 
    <option value="Today">Today</option> 
    <option value="Tomorrow">Tomorrow</option> 
    <option value="In 2 days">In 2 days</option> 
</select> 
<select id="startHour" name="startHour" class="form-control"> 
</select> 

<script> 
$(document).ready(function() { 
    $('#startDay').change(startDayChange) 
    // prepare startHour from startDay default value when just loaded 
    .change(); 
}); 
function startDayChange() { 
    // define minimum startHour depending on startDay: 
    var minStartHour = new Date(); 
    if ($('#startDay').val() == "Today") { 
     if (minStartHour.getMinutes() < 30) { 
      minStartHour.setMinutes(30,0); 
     } else { 
      minStartHour.setHours(minStartHour.getHours() + 1); 
      minStartHour.setMinutes(0,0); 
     } 
    } else { 
     minStartHour.setHours(6,0,0); 
    } 
    // prepare bounds for allowed hours: 
    var startHour = minStartHour, 
     stopHour = new Date(); 
    stopHour.setHours(24,30); 
    // generate options: 
    $('#startHour').empty(); 
    while (startHour.getTime() < stopHour.getTime()) { 
     $('#startHour').append(
      '<option>' 
      + startHour.toString().match(/\d{2}:\d{2}/) 
      + '<\/option>' 
     ); 
     startHour.setTime(startHour.getTime() + 1800000); 
    } 
} 
</script> 

Пожалуйста, обратите внимание: Есть так много способов для достижения этой цели, что мы не можем сказать, это «» решение. Было найдено много других (и, вероятно, лучших).
Существует рабочий пример here.

BTW, для получения дополнительной информации здесь, пожалуйста, не запрашивайте полностью построенное решение с нуля: оно превышает границы этой миссии сайта, что должно помочь в решении конкретной проблемы, с которой вы сталкиваетесь во время кодирования, а не предоставлять весь код для данной конечной потребности пользователя!

Answer 2

Поскольку вы разместили свой вопрос с тегом «javascript», кажется ясным, что вы ожидаете, что ответ будет также javascript. Так что я задаюсь вопросом, почему вы создали свои варианты с PHP, в то время как вы ожидаете, что их нужно будет изменить с помощью javascript ?.

И еще один важный момент: создание опций с помощью PHP означает, что вы используете час сервера, в то время как у вашего пользователя может быть совершенно другой!

Так что это определенно должно быть все javascript, IMO.
Я думаю, вы не очень неопытны с JS, поэтому приведенное ниже предложение показывает, какая структура может быть использована, и не включает в себя все точные сведения о работе в часах (но не стесняйтесь спрашивать, если необходимо).

<select id="startDay" name="startDay" class="form-control"> 
    <option value="Today">Today</option> 
    <option value="Tomorrow">Tomorrow</option> 
    <option value="In 2 days">In 2 days</option> 
</select> 
<select id="startHour" name="startHour" class="form-control"> 
</select> 

<script> 
$(document).ready(function() { 
    $('#startDay').change(startDayChange) 
    // prepare startHour from startDay default value when just loaded 
    .change(); 
} 
function startDayChange() { 
    var minStartHour = new Date(); 
    if ($('#startDay').val() == "Today") { 
     if (minStartHour.getMinutes() < 30) { 
      minStartHour.setMinutes(30); 
     } else { 
      minStartHour.setHours(minStartHour.getHours() + 1); 
      minStartHour.setMinutes(0); 
     } 
    } else { 
     minStartHour.setHours(6); 
     minStartHour.setMinutes(0); 
    } 
    // then work using minStartHour... 
} 
</script> 

Обратите внимание, что мы должны были добавить атрибут ID для <select> тегов.