jQuery Validate selected time is not in the past and at least 30 before current time using JavaScript

Question

How can I validate if time selected is correct if user is given a list of times frames to select from, I would like to validate the selected time frame with the following criteria:

1) not in the past (in other words not before now)
2) selected time must be at least 30 minutes greater than current time

Here is the HTML snippet from my form:
<select id="callBackTime" tabindex="9" name="callBackTime">
<option value="8:00 AM - 8:30 AM">8:00 AM - 8:30 AM</option>
<option value="8:30 AM - 9:00 AM">8:30 AM - 9:00 AM</option>
<option value="9:00 AM - 9:30 AM">9:00 AM - 9:30 AM</option>
<option value="9:30 AM - 10:00 AM">9:30 AM - 10:00 AM</option>
<option value="10:00 AM - 10:30 AM">10:00 AM - 10:30 AM</option>
</select>

I am using jQuery.validator.addMethod() to add my own rule and this is what I have so far:

Here is my JQuery Custom rule Validation so far:
$.validator.addMethod (
  "timeToCall", 
    function(value, element) {
    var timeSelected = $('#callBackTime').val();
    var today = new Date();
    var currentTime = today.getHours() + ':' + today.getMinutes();
    return Date.parse(timeSelected) > Date.parse(currentTime);
  }, 
  "*Please select a later time."
);

Here is the code to trigger the validation:
  $('#submit').click(function(e) {
     $("#supportCallBackForm").validate({

      rules: { 
      callBackTime: { timeToCall : true }
      },

     submitHandler: function(form) {
     // do other things for a valid form
     submitCallBackSupportRequest();
     return false;
    }
   });
});

I think my custom .validator method is where I need most help. I don't know how to correctly compare what the user selects and the current time, in addition the selected time has to be at least greater than 30 minutes from NOW. Any help greatly appreciated.

Answer 1

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.

Answer 2

Have a look at moment.js. You can get the current time plus 30 minutes this way:

var smallestAllowedTime = moment().add("m",30);

Then, if the user selected 8:30 - 9:00 if you parse out the 8 and 30 as the "floor" "hour and minute" for the call time, you can do the comparison pretty easily:

var hour = 8; // parsed from selection
var minute = 30; // parsed from selection
var userSelectedTime = moment().set("hour",hour).set("minute",minute);
return userSelectedTime.isAfter(smallestAllowedTime);

This doesn't yet account for am/pm or time zones.