Forums

Add 1 hour to selected time in dropdown one

sitebuildernow 09 Aug, 2009
Hi, I have 2 dropdowns: starttime and end time.
I would like the end time dropdown to automatically be 1 hour later than the selected start time - is this possible?
GreyHead 09 Aug, 2009
Hi sitebuildernow,

Yes, you'll need a bit of JavaScript to do it though.

Though if it's always one hour ahead you probably don't need an input???

Bob
sitebuildernow 09 Aug, 2009
No, the default is an hour but often the end time is not just 1 hour (we place interpreters for the deaf and our minimum is 1 hour). Can you suggest where I might find the javascript and where it would need to be placed? Thanks - you really are awesome.
GreyHead 10 Aug, 2009
Hi Harmony,

You can turn on a time-picker in the calendar - that might be useful here. It's also possible to set up two linked calendars with a specified number of days between then (not sure about hours though). There was an earlier thread on this if you search on datepickers. I'll try and take a look later but I'm very busy at the moment and have a back-log to clear.

Bob
nml375 10 Aug, 2009
Hi,
The code below should do the trick for you script-wise. Be advised that it will always replace the end-time when you alter the start-time, not only when no end-time has been selected. Also, it will only update when the start-time has been altered.
<?
JHTML::_('behavior.mootools');

$script = 'function updatetime(item) {
  var dest = $("endtime");
  var i = item.selectedIndex;
  var j = item.options[i].value.toInt();
  if (j > -1)
    j = (j + 1) % 24;

  i = 0; var v;
  while (v = dest.options[i++])
  {
    if (v.value == j) {
      v.selected = true;
      return;
    }
  }
}';
JFactory::getDocument()->addScriptDeclaration($script);

?>
<div>
 <label for="starttime">Time of start</label>
 <select name="starttime" id="starttime" onChange='updatetime(this);'>
  <option value="-1" selected></option>
<?
for ($i = 0; $i < 24; $i++)
{
  echo('  <option value="' . $i . '">' . $i . ":00</option>\n");
}
?>
 </select>
</div>
<div>
 <label for="endtime">Time of end</label>
 <select name="endtime" id="endtime">
  <option value="-1" selected></option>
<?
for ($i = 0; $i < 24; $i++)
{
  echo('  <option value="' . $i . '">' . $i . ":00</option>\n");
}
?>
 </select>
</div>


/Fredrik
sitebuildernow 14 Aug, 2009
Hi, I like your idea Bob of turn on a time-picker but I have searched the forums and cannot figure out how - can you help?
Thanks
Harmony
GreyHead 15 Aug, 2009
Hi Harmony,

Sorry, I was wrong; the Aeron calendar that ChronoForms uses doesn't support a timepicker; and the old Dynarch calendar that Joomla uses (and Fredrik's code loads) has a time-picker but doesn't support linked time differences. :-(

It looks as though you will need more sophisticated coding to make this work along the lines that Fredrik posted.

Bob
nml375 15 Aug, 2009
Err..
To my best knowledge, my code does not load any calendar, but simply creates two dropdown inputs with values ranging from -1 to 23. I guess using a for-loop is overkill for a simple example..

The tricks in the code:
First, on the first dropdown, add an on-change event containing "updatetime(this)" (calls the js function updatetime(), passing our current input as a parameter)
Next we define the updatetime() function, which retrieves the value from the passed select input, and makes a reference to our second select input (dest = $('endtime');). Once we got these, calculate the next hour, and search the 'dest' object for the proper value. Once found, set the 'selected' property to true and be done.

PS, pardon for the slow reply.. had a fatal HD-crash last afternoon, and I'm currently stuck using an old 600MHz linux system and konqueror...

/Fredrik
sitebuildernow 19 Aug, 2009
Hi Frederick, thanks for the follow up - I guess I'm slightly confused about what your code will (and won't) do - the way I read it this will make it so the user can "only" set one hour? For example, if they select 2p then the second drop down will default to 3p but they can't change that? Sorry I'm a little dense - kind of like your old Unix box LOL. Sorry to hear about your hard drive crash.
nml375 19 Aug, 2009
Hi,
Lets try to clear some things up then..

What the code will do:
Whenever the user alters the value of the first dropdown, a call to updatetime() is done. This function will then get the value of the first dropdown, and do some fancy maths to get a new value. This value is then used to update the 'endtime' dropdown with a new selected option.
It will overwrite the value of 'endtime' if you change the first dropdown again.

What the code will not do:
It will not alter the value of either dropdowns if you change the value of 'endtime'.
It will not lock or disable the 'endtime' dropdown if you select a value in the first dropdown.

As such, if your user selects 2pm as starttime, the endtime will automatically change to 3pm. However, the user is free to alter this to any other option, such as 4pm.
Should then the user alter the starttime to 10am, the endtime will be overwritten to 11am.

Hope this helps you understand the code a little better.

PS. Hopefully getting a new pair of drives tomorrow or friday.. A funny thing though, seems I've discovered a new dimension they call "The Real World" as a result😉
/Fredrik
sitebuildernow 19 Aug, 2009
Wow, you are very kind to give me such detail! Thank you thank you. BTW - what is the "real world"? LOL - you mean there is more to life than a computer keyboard and monitor?
This topic is locked and no more replies can be posted.