jqueryasp.netdatepickermaxdate

Can't set maxDate from an enddate to input startdate + 30 days


I have 2 input fields asking for a start date and an end date. Whenever the startdate is filled in, the end date's possibilities should be changed so you can only choose between dates until 30 days after the filled in start date. Everything underneath works apart from the 2nd line of the second block where I try to do what's explained above. Any ideas? (working with asp.net and Jquery)

FRONTEND:

<p><asp:TextBox ID="dateStart" runat="server" CssClass="texter" placeholder="<%$ Resources:GlobalResource, startperiode%>" ></asp:TextBox></p>
<p><asp:TextBox ID="dateEnd" runat="server" CssClass="texter" placeholder="<%$ Resources:GlobalResource, eindperiode%>" ></asp:TextBox></p>

JQUERY:

$("#ctl00_ContentPlaceHolder1_dateStart").datepicker({
        dateFormat: "yy-mm-dd",
        minDate: +0,
        onSelect: function () {
            $('label[for=dateStart]').fadeOut("fast");
        }
    });

$("#ctl00_ContentPlaceHolder1_dateStart").change(function () {
    $(this).datepicker('setDate', $(this).datepicker('getDate'));
    $("#ctl00_ContentPlaceHolder1_dateEnd").datepicker('maxDate', $("#ctl00_ContentPlaceHolder1_dateStart").datepicker('getDate') + 30);
}).datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function () {
        $('label[for=dateStart]').fadeOut("fast");
    }

    });

$("#ctl00_ContentPlaceHolder1_dateEnd").datepicker({
    dateFormat: "yy-mm-dd",
    minDate: +0,
    onSelect: function () {
        $('label[for=dateStart]').fadeOut("fast");
    }
});

$("#ctl00_ContentPlaceHolder1_dateEnd").change(function () {
    $(this).datepicker('setDate', $(this).datepicker('getDate'));
}).datepicker({
    dateFormat: "yy-mm-dd",
    onSelect: function () {
        $('label[for=dateEnd]').fadeOut("fast");
    }
});

Solution

  • You need to put this in the "onSelect" function on the $("#ctl00_ContentPlaceHolder1_dateStart") datepicker.

    $("#ctl00_ContentPlaceHolder1_dateStart").datepicker({
            dateFormat: "yy-mm-dd",
            minDate: +0,
            onSelect: function () {
                $('label[for=dateStart]').fadeOut("fast");        
    
                var startDate = $("#ctl00_ContentPlaceHolder1_dateStart").datepicker('getDate');
                startDate.setDate(startDate.getDate() + 30);
                $("#ctl00_ContentPlaceHolder1_dateEnd").datepicker('option', 'maxDate', startDate );
            }
        });