af83

Make connected combo boxes to choose a time interval

Ever needed to select in a form a start and an end time (meeting, event etc..) this little bit of code will help you have a default interval (here 2 hours). When the first combo box changes the second one is set to two hours later. As usual this javascript is unobtrusive and degradable, just call somewhere initHourCombos() to initialize it. Make sure you change the name $('start') and $('end') if your elements have a different id.

/* Make connected combo box 'End' jump 2 hours when combo 'Start' changes
* (c) AF83 2007 Ori Pekelman
* uses code found on http://www.irt.org/script/626.htm
* uses the Prototype library for attaching the event to the combo (you can do without this.. just find the correct element)

<label for="start">From :</label>
<select id="start" name="start" class="hour">
  <option value="07:00">07:00</option>

  <option value="07:30">07:30</option>
  <option value="08:00">08:00</option>
  <option value="08:30">08:30</option>
  <option value="09:00">09:00</option>
  <option value="09:30">09:30</option>
  <option value="10:00">10:00</option>

  <option value="10:30">10:30</option>
  <option value="11:00">11:00</option>
  <option value="11:30">11:30</option>
  <option value="12:00" selected="selected">12:00</option>
  <option value="12:30">12:30</option>
  <option value="13:00">13:00</option>

  <option value="13:30">13:30</option>
  <option value="14:00">14:00</option>
  <option value="14:30">14:30</option>
  <option value="15:00">15:00</option>
  <option value="15:30">15:30</option>
  <option value="16:00">16:00</option>

  <option value="16:30">16:30</option>
  <option value="17:00">17:00</option>
  <option value="17:30">17:30</option>
  <option value="18:00">18:00</option>
  <option value="18:30">18:30</option>
  <option value="19:00">19:00</option>

  <option value="19:30">19:30</option>
  <option value="20:00">20:00</option>
  <option value="20:30">20:30</option>
  <option value="21:00">21:00</option>
  <option value="21:30">21:30</option>
  <option value="22:00">22:00</option>

  <option value="22:30">22:30</option>
  <option value="23:00">23:00</option>
  <option value="23:30">23:30</option>
  <option value="24:00">24:00</option>
  <option value="24:30">24:30</option>
  <option value="01:00">01:00</option>

  <option value="01:30">01:30</option>
  <option value="02:00">02:00</option>
  <option value="02:30">02:30</option>
  <option value="03:00">03:00</option>
  <option value="03:30">03:30</option>
  <option value="04:00">04:00</option>

  <option value="04:30">04:30</option>
  <option value="05:00">05:00</option>
  <option value="05:30">05:30</option>
  <option value="06:00">06:00</option>
  <option value="06:30">06:30</option>
</select>
<label for="end" class="hour">to:</label>
<select id="end" name="end" class="heure">
  <option value="07:00">07:00</option>
  <option value="07:30">07:30</option>
  <option value="08:00">08:00</option>
  <option value="08:30">08:30</option>

  <option value="09:00">09:00</option>
  <option value="09:30">09:30</option>
  <option value="10:00">10:00</option>
  <option value="10:30">10:30</option>
  <option value="11:00">11:00</option>
  <option value="11:30">11:30</option>

  <option value="12:00">12:00</option>
  <option value="12:30">12:30</option>
  <option value="13:00">13:00</option>
  <option value="13:30">13:30</option>
  <option value="14:00" selected="selected">14:00</option>
  <option value="14:30">14:30</option>

  <option value="15:00">15:00</option>
  <option value="15:30">15:30</option>
  <option value="16:00">16:00</option>
  <option value="16:30">16:30</option>
  <option value="17:00">17:00</option>
  <option value="17:30">17:30</option>

  <option value="18:00">18:00</option>
  <option value="18:30">18:30</option>
  <option value="19:00">19:00</option>
  <option value="19:30">19:30</option>
  <option value="20:00">20:00</option>
  <option value="20:30">20:30</option>

  <option value="21:00">21:00</option>
  <option value="21:30">21:30</option>
  <option value="22:00">22:00</option>
  <option value="22:30">22:30</option>
  <option value="23:00">23:00</option>
  <option value="23:30">23:30</option>

  <option value="24:00">24:00</option>
  <option value="24:30">24:30</option>
  <option value="01:00">01:00</option>
  <option value="01:30">01:30</option>
  <option value="02:00">02:00</option>
  <option value="02:30">02:30</option>

  <option value="03:00">03:00</option>
  <option value="03:30">03:30</option>
  <option value="04:00">04:00</option>
  <option value="04:30">04:30</option>
  <option value="05:00">05:00</option>
  <option value="05:30">05:30</option>

  <option value="06:00">06:00</option>
  <option value="06:30">06:30</option>
</select>


*/
function initHourCombos() {
if ($('start')){
$('start').addEventListener('change',function () {
    $('end').value = addTime (this.value ,"02:00")
},false)}}

function addTime(t1,t2){
var m = (t1.substring(0,t1.indexOf(':'))-0) * 60 +
        (t1.substring(t1.indexOf(':')+1,t1.length)-0) +
        (t2.substring(0,t2.indexOf(':'))-0) * 60 +
        (t2.substring(t2.indexOf(':')+1,t2.length)-0);
var h = Math.floor(m / 60);
m=(m - (h * 60));
if (h>24) {h=h-24};
if (m<10) {m='0'+m};
if (h<10) {h='0'+h};

t3=(h + ':' + m );

return t3;
}

blog comments powered by Disqus