Создать связанный ввод времени — HTML / PHP / JAVASCRIPT

Question

Создать связанный ввод времени — HTML / PHP / JAVASCRIPT

Мне нужно «связать» две формы ввода, чтобы при выборе определенного времени второй вход не отображал время до выбранного.

например: я выбираю 16:30, второй вход отображает: 17:00, 17:30, 18:00 и т. д.

Извините за мой плохой английский. вот код Я думаю, что мне нужно использовать JS, чтобы скрыть другие объекты, но я не знаю, как это сделать.

Спасибо за помощь

<div class="input-group">
<!--start time-->
<span class="input-group-addon"><div class="ciao">Inizio</div></span>
<select class="form-control" name="start">
<?php $orari=h oursRange(12 * 3600, 20 * 3600, 30 * 60);
foreach ($orari as $key=>$value) {
echo "<option>$value</option>";
} ?>
</select>
</div>

<!--end time-->
<div class="input-group">
<span class="input-group-addon"><div class="ciao">Fine</div></span>
<select class="form-control" name="end">
<?php foreach ($orari as $key=>$value)
{
echo "<option>$value</option>";
} ?>
</select>
</div>

0

html input php time timepicker

Решение

По вопросам рекламы [email protected]

Accepted Answer

Я бы посоветовал вам взглянуть на jQuery Timepicker: http://jonthornton.github.io/jquery-timepicker/

Вот пример, который вы можете использовать со своим кодом после загрузки таймера:

<div id="timepicker">
Inizio: <input type="text" class="time start" name="start" />
Fine: <input type="text" class="time end" name="end" />
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />

<script type="text/javascript" src="lib/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="lib/bootstrap-datepicker.css" />
<script type="text/javascript" src="lib/site.js"></script>
<link rel="stylesheet" type="text/css" href="lib/site.css" />
<script src="http://jonthornton.github.io/Datepair.js/dist/datepair.js"></script>
<script src="http://jonthornton.github.io/Datepair.js/dist/jquery.datepair.js"></script>

<script>
$('#timepicker .time').timepicker({
'showDuration': true,
'timeFormat': 'g:ia'
});

$('#timepicker').datepair();
</script>

0

Другие решения

Других решений пока нет …

Источник