jQuery UI Date Picker Validation

JavaScript
1

I am trying to validate the date fields so when you if you select a date in the future and in the second input box you select today’s date it should not let you submit the form.

I have it working so you cant select yesterday’s date - its the date comparison that i cant seem to get working.

/js/jquery-ui-1.8.6.custom.min.js"/>
/js/jquery.validate.js" />
/js/jquery.ui.datepicker.validation.js" />

<asp:TextBox ID="txtStartDate" runat="server" CssClass="DatepickerInput validBeforeDatepicker" />
<asp:TextBox ID="txtEndDate" runat="server" CssClass="DatepickerInput validAfterDatepicker" />

<script type="text/javascript">
$(function () {
    $("#tabs").tabs();
});

 $('.validBeforeDatepicker,.validAfterDatepicker').datepicker();


$(function () {
    $(".DatepickerInput").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: 0,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy'
    });
});

$(function () {
    $("#validAfterDatepicker").datepicker({
        showOn: "button",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        minDate: +1,
        required: true,
        message: "This is a required field",
        dateFormat: 'dd-mm-yy'
    });
});

I’m following this example but I’m going wrong somewhere and cant seem to quite put my finger on what it could be. http://keith-wood.name/uiDatepickerValidation.html

Website: http://bit.ly/WdZf10

Please dont submit form as it will just be spam if testing the form on the website. You can see its not validating even before submitting the form

2

You can use the jQuery UI datepicker date range picker example from this page. It will let the user choose a date range from a single calendar such that end date >= start date. In that example, add one extra check for min date (minDate: 0) to make sure past starting date cannot be chosen.