Marco Ligabue Marco Ligabue - 1 year ago 127
HTML Question

Create linked time input - HTML/PHP/JAVASCRIPT

I need to "link" the two input forms so if i select a certain time, the second input will not display times before the choosen one.

ex: I select 16:30, the second input displays: 17:00, 17:30, 18:00, etc...

sorry for my bad english. here's the code. I think i need to use JS to hide other objects but i don't know how to do it.

Thanks for help

<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>";
} ?>

<!--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>";
} ?>

Answer Source

I would suggest you look at jQuery Timepicker:

Here is an example you can use with your code after downloading timepicker:

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

<script type="text/javascript" src=""></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=""></script>
<script src=""></script>

    $('#timepicker .time').timepicker({
        'showDuration': true,
        'timeFormat': 'g:ia'


Hope this helps!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download