Ensure finish time is greater than start time if start/finish dates are equal using jQuery validate plugin

问题

I've got 4 fields - start date (text field using jQuery datepicker), start time (dropdown select), finish date (text field using jQuery datepicker) and finish time (dropdown select).

<form id="my_form">

  <label for="start_date">Start Date</label>
  <input type="text" id="start_date" name="start_date" />

  <label for="start_time">Start Time</label>
  <select name="start_time" id="start_time">
    <option value="09:00" >09:00</option>
    <option value="09:30" >09:30</option>
    <option value="10:00" >10:00</option>
    <option value="10:30" >10:30</option>
    <option value="11:00" >11:00</option>
    <option value="11:30" >11:30</option>
    <option value="12:00" >12:00</option>
  </select>

  <label for="finish_date">Finish Date</label>
  <input type="text" id="finish_date" name="finish_date" />

  <label for="finish_time">Finish Time</label>
  <select name="finish_time" id="finish_time">
    <option value="09:00" >09:00</option>
    <option value="09:30" >09:30</option>
    <option value="10:00" >10:00</option>
    <option value="10:30" >10:30</option>
    <option value="11:00" >11:00</option>
    <option value="11:30" >11:30</option>
    <option value="12:00" >12:00</option>
  </select>

  <input type="submit" />

</form>

I'm using the standard jQuery Datepicker Widget functions to ensure that the end date is always the same or later than the start date:

$( "#start_date" ).datepicker({
    dateFormat: 'dd/mm/y',
    minDate: new Date(),
    onClose: function( selectedDate ) {
        $( "#finish_date" ).datepicker( "option", "minDate", selectedDate );
    }
});
$( "#finish_date" ).datepicker({
    dateFormat: 'dd/mm/y',
    minDate: new Date(),
    onClose: function( selectedDate ) {
        $( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
    }
});

So my question is, using the jQuery validate plugin, how can I add a rule that ensures the end time is greater than (but not equal to) the start time, if, the start date and finish date are the same? I'm not even sure where to start on this one and have a blank script at the moment, so any help would be appreciated:

$("#my_form").validate({
  rules: {
    start_time: {  }
  }
});

回答1:

Here is a significant working start. It will require some modification as to which element(s) you want to set the error on when dates/times are equal or start is less than end, or how you want error to display. The plugin has many options for erorrs.

The core function is :

function compareDates() {
    var startDate = $("#start_date").datepicker('getDate');
    var endDate = $("#finish_date").datepicker('getDate');        
    if( !startDate || !endDate){
        return false;
    }

    if(endDate > startDate) {
        return true;

    } else {
        var endTime = endDate.getTime() + $('#finish_time').parseValToNumber();
        var startTime = startDate.getTime() + $('#start_time').parseValToNumber();
        return endTime > startTime;
    }
}

This gets used in an addMethod to validator:

jQuery.validator.addMethod("checkDates", function(value, element) {
  /* see function above*/
  return  compareDates() ;
}, "End date/time must be after start");

The validator is initialized using:

$('#my_form').validate({ 
    rules:{
        start_date:'required', 
        /* arbitrarily used this element  for "checkDates" rule*/
        finish_date:{required:true,checkDates:true},

        finish_time:'required',
        start_time:'required'
    }
});

Helper plugin to parse the select tag values to a number ( used in compareDates() ):

/* change the select value to an integer to add to unix time of date from datepicker*/
$.fn.parseValToNumber = function() {
    return parseInt($(this).val().replace(':',''), 10) || 0;
}

DEMO: http://jsfiddle.net/dUe83/1/

This may still have bugs....was hastily put together and not with intent of being a complete off the shelf solution but rather as a significant working starting point.

来源：https://stackoverflow.com/questions/13898219/ensure-finish-time-is-greater-than-start-time-if-start-finish-dates-are-equal-us