Jquery bassistance: validate that end date is after start date - jquery-validate

Question

I am using jquery bassistance validation and need to verify that a start date is after an end date. I am wondering if anyone knows if this functionality exists and if I can add rules to do this or if I have to add a custom check. I am having difficulty finding any examples of this that work with my code which forwards to another function if the form is valid. (pasted below)
$("#hotels").validate({
rules: {
checkinDate: {
date: true
},
checkoutDate: {
date: true
}
}
});
$("#hotels input.submit").click(function() {
var isValid = $("#hotels").valid();
if (isValid == true) {
} else {
hComp();
return false;
}
} else {
return false;
}
});
I saw this in another example, but am not sure how I could use it.
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
if (startDate < endDate){
// Do something
}
Thanks in advance for any assistance.

Answer 1

That example looks like it's exactly what you need. Have a look here.
Borrowing from that jquery example, suppose you have the following HTML:
<input id="startDate" value="Jan 12, 2009" />
<input id="endDate" value="Jan 12, 2010" />
Then this JavaScript code should show the alert "Start date is before end date!" (assuming the values aren't modified):
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
if (startDate < endDate){
alert("Start date is before end date!");
}

Answer 2

I ended up solving this problem before validation, which is probably a much better idea anyway. Here's the solution using the jquery ui datepicker. Then I can just use the same logic to do a final validation check.
$('input').filter('.datepicker').datepicker({
beforeShow: customRange,
showOn: 'both',
buttonImage: contextPath + '/assets/images/icon-calendar.gif',
buttonImageOnly: true,
buttonText: 'Show Date Picker'
});
function customRange(a) {
var b = new Date();
var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
if (a.id == 'checkoutDate') {
if ($('#checkinDate').datepicker('getDate') != null) {
c = $('#checkinDate').datepicker('getDate');
}
}
return {
minDate: c
}
}