How can I compare date/time values using the jQueryUI datepicker and HTML5 time input?

Question

I want to validate that the "begin" date/time pair predates the "end" date/time pair on a page. I'm using the jQueryUI datepicker, and the HTML5 time input element/widget.

This jQuery:

    var begD = $.datepicker.parseDate('mm/dd/yy', $('#BeginDate').val());
    var endD = $.datepicker.parseDate('mm/dd/yy', $('#EndDate').val());
    if (begD > endD) {
            alert('Begin date must be before End date');
            $('#BeginDate').focus();
            return false;
    }    

(see this script in context here: http://jsfiddle.net/clayshannon/QCrXG/9/)

...works for comparing the datepicker vals, but I need to incorporate the time elements too, so that a time (on the same date) that is earlier in the "End" time element than the "Begin" time element will also flag the range as invalid.

How to do that?

Answer 1

Here's an approach. You need to test to see if the dates are the same, and then inside that, append the times to new date objects that you can then compare. (There might be a faster way to do this, but this works in testing, here: http://jsfiddle.net/mori57/SEqVE/):

} else if(begD.toString() == endD.toString() ){
    var dteString = begD.getFullYear() + "/" + (begD.getMonth()+1) + "/" + begD.getDate();
    var begT = new Date(dteString + " " + $('#BeginTime').val());
    var endT = new Date(dteString + " " + $('#EndTime').val());

    if( begT > endT ){
        alert('Begin date must be before End date');
        $('#BeginTime').focus();
        return false;
    }
}