I would suggest a few changes. First if you can make your select as follows
<select id="callBackTime" tabindex="9" name="callBackTime">
<option value="20:00 - 20:30">8:00 PM - 8:30 PM</option>
<option value="20:30 - 21:00">8:30 PM - 9:00 PM</option>
....
....
<option value="08:30 - 09:00">8:30 AM - 9:00 AM</option>
</select>
notice, of course, the two digits for the single digit hours
It will make it much easier to parse.
In your validator you could do like this
$.validator.addMethod (
"timeToCall",
function(value, element) {
var now = new date();
var timeSelected = $('#callBackTime').val();
var startHour = timeSelected.substr(0,2);
var startMin = timeSelected.substr(3,2);
var endHour = timeSelected.substr(9,2);
var endMin = timeSelected.substr(12,2);
// depending on whether you are interested in the beginning of the timespan or the end
var startTimeInMinutes = (startHour * 60) + startMin;
var targetTimeInMinutes = (now.getHours() * 60) + now.getMinutes();
return startTimeInMinutes + 30 > targetTimeInMinutes;
},
"*Please select a later time."
);
I have not actually run this code so I would definitely check the substrings that result, whether you have to parse the strings before you multiply them and whether * gets executed before the the +
I kind of suck at those things.
good luck and let me know if you need more.