Interact with two Time Pickers

Hello,

when i implement two time-picker, i want to ensure that the value of the second one is allways lower than the value of the first one.

So I tried to implement an additional check after clicking on “Update Profile”, but I couldn’t find out, where to add the code like:
“if (timepicker2.val() >= timepicker1.val())
add_error(…);
”
I thought to add some code into “um-actions-profile.php”, but I couldn’t find the right function and I think this would not

There are same more TimePickers with the same functionality, but the count of them is fix!

—————————————————————————————–
Just for understanding:

With jsfiddle.net I created the following solution for DropDown-Buttons, but I don’t know how to implement this into um-profile-form.

HTML

<select name=”select1″ id=”select1″>
<option value=””>– select –</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>
</select>
<select name=”select2″ id=”select2″>
</select>

JAVASCRIPT

// this function must be wrapped inside onload event
var select1 = document.getElementById(“select1”);
var select2 = document.getElementById(“select2”);
select1.onchange = function() {
// empty select2
while (select2.firstChild) {
select2.removeChild(select2.firstChild);
}
if (select1.selectedIndex == 0) {
return;
}
if (select1.selectedIndex == (select1.options.length – 1))
{
var o = document.createElement(“option”);
o.value = “06:00”;
o.text = “06:00”;
select2.appendChild(o);
}
else
{
for (var i = select1.selectedIndex + 1; i < select1.options.length; i++)
{
var o = document.createElement(“option”);
o.value = select1.options[i].value;
o.text = select1.options[i].text;
select2.appendChild(o);
}
}
}
—————————————————————————————