Question

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.

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

Answer 1

Found a fix for the problem and probably less code used for it as well. Thought I’d share so if anyone gets stuck they can use this.

<script type="text/javascript">

$(function () {

    function getDiff() {
        var from = $(".start").val();
        var till = $(".fin").val();
        var c = from.split("/");
        beg = new Date(c[2], c[1] - 1, c[0]);
        var d = till.split("/");
        en = new Date(d[2], d[1] - 1, d[0]);
        var rest = (en - beg) / 86400000;
        var txt = rest == 0 ? "" : rest + " days"
        $("#res").text(txt);
    }

    $(".start").datepicker({
        changeMonth: false,
        changeYear: false,
        showAnim: "fadeIn",
        gotoCurrent: true,
        minDate: 0, //change this to +3 to start 3 days from now
        dateFormat: "dd/mm/yy",
        onSelect: function (dateText, inst) {
            $(".fin").val(dateText);
            $(".fin").datepicker("option", "minDate", dateText);
            getDiff();
        }
    });

    $(".fin").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        changeYear: true,
        showAnim: "fadeIn",
        onSelect: getDiff
    });
});