创建链接时间输入 - HTML/PHP/JAVASCRIPT

Question

我需要 "link" 两个输入表单，所以如果我 select 某个时间，第二个输入将不会在选择的输入之前显示时间。

ex: I select 16:30, 第二个输入显示: 17:00, 17:30, 18:00, etc...

抱歉我的英语不好。这是代码。我想我需要使用 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>

Answer 1

我建议你看看 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>

希望对您有所帮助！

创建链接时间输入 - HTML/PHP/JAVASCRIPT

Create linked time input - HTML/PHP/JAVASCRIPT

html

php

time

input

timepicker