阻止用户在Calendar ASP中阻止的文本框中输入日期

Question

I have a textbox which has a calendar icon at its right side. When I click icon, the calendar appears which allows user to select a particular date. In calendar the user cannot select the previous date and also the calendar is blocked for 2 years from the current date.

Now I have to validate the textbox.

1. If user manually enters any past date it gives an error " Invalid Date" - which is correct
2. But if the user enters future date ie, a date after 2 years from current date, the system accepts which is incorrect.

So I want to validate textbox so that user gets an error "Invalid Date" if he enters a date now available in calendar and I don't want Read Only textbox.

Code

<script type="text/javascript">

    window.onload = function () {
        var dateToday = new Date();
        $("input.dtpRelease").datepicker({

            showOn: 'button',
            changeYear: true,
            changeMonth:true,
            minDate: dateToday,
            maxDate: "2y",
            buttonImageOnly: true,
            dateFormat: "mm/dd/yy",
            buttonImage: '/Images/icon_calendar_24.png',

        });
   }

<asp:TextBox ID="dtpStartDate" runat="server" Style="width: 80px; margin-top: 5px;" CssClass="form-control dp2 dtpRelease pull-left" MaxLength="100" placeholder="Start Date" Text='<%# MSEncoder.Encoder.HtmlEncode(Convert.ToString( Eval("FulfillmentStartDate"))) %>' onblur="ValidateDate(this)"></asp:TextBox> 
                           <br/><br/><asp:RegularExpressionValidator ID="regExSDate" runat="server" ControlToValidate="dtpStartDate" ForeColor="Red" Display="Dynamic" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$" ErrorMessage="Please enter date in MM/DD/YYYY Format"  ValidationGroup="vg" ></asp:RegularExpressionValidator>
                                     <asp:CompareValidator ID="cvStartDate" runat="server" ControlToValidate="dtpStartDate" ErrorMessage="Invalid Start Date" ForeColor="Red" Operator="GreaterThanEqual"  Display="Dynamic" ValidationGroup="FirstPreview" CssClass="validatorMsg" ValueToCompare="<%# DateTime.Today.ToShortDateString() %>" SetFocusOnError="True"  Type="Date" ></asp:CompareValidator> 

Answer 1

why dot you just disable the textbox, and let the user enter the date through the datepicker only. it will be exactly like this demo , but you can trigger the calendar from an image beside the textbox

Answer 2

you can use the below function to check wither the date in textbox is within range or not

<script>
   function checkDate(d)
   {
       var maxAcceptedDate = new Date()
       maxAcceptedDate.setFullYear(maxAcceptedDate.getFullYear()+2)

       return d <= maxAcceptedDate
   }
</script>

if you are going to call this js function from your custom validator you need to change the method to make sure it wont take any arguments

<script>
   function checkDate()
   {
      //var d = [get text from your textbox as date]
       var maxAcceptedDate = new Date()
       maxAcceptedDate.setFullYear(maxAcceptedDate.getFullYear()+2)

       return d<=maxAcceptedDate
   }
</script>