Post
Ask Question

Disable Future and Past Date Of AJAX Calendar in ASP.Net C#

Background

Before AJAX Control Toolkit 4.0 or any other calendar such as the ASP.Net Calender Control, it is a very tedious process to disable the past or future dates from a calendar. Because to do that we need to write more than a hundred lines of code in JavaScript or any other scripting language but we can do this by using an AJAX calendar extender with two lines of code. So by considering the above requirement I have decided to write this article.

So let us start with the basics.

Requirement

  • You need an "AJAX Control Toolkit 4.0" and above, it only works in this version
  • Don't forget to add the "AJAX control toolkit assembly reference" at the top of the .aspx page source code 
  • Don't forget to use either "Script Manager" or "ToolScript Manager" in a .aspx page because whenever you use any AJAX control you need to use one of them to handle scripts.

Now let us create one sample application to do our task as

  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".
  2. "File" - "New Web Site" - "C#" - "Empty WebSite" (to avoid adding a master page).
  3. Provide the website a name such as AjaxCalender or another as you wish and specify the location.
  4. Then right-click on Solution Explorer - "Add New Item" - "Default.aspx" page.
  5. Drag and drop one textbox and one ScriptManager from the Ajax Extension section on the <form> section of the Default aspx page.

Now the source code of the Default.aspx should look as in the following.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div align="center">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="Calendar1" runat="server" 
            Enabled="True" TargetControlID="TextBox1" Format="dd/MM/yyyy"></asp:CalendarExtender>
    </div>
</form>

Now use the following code in the .cs file.

To disable a past date use the following code in the "Page load".

protected void Page_Load(object sender, EventArgs e)
{
    Calendar1.StartDate = DateTime.Now; // to disable past Date
}

In the above code, I have set the Calendar Extender start date to the current date so I will disable all past dates.

Now run the application; the output will look as in the following.

Output

To disable a future date use the following code in the "Page load.

protected void Page_Load(object sender, EventArgs e)
{
    Calendar1.EndDate = DateTime.Now;   //to disable future Date
}

In the above code, I have set the Calendar Extender End date to the current date so I will disable all future dates.

Now run the application; the output will look as in the following.

Run application

Start the Calendar after one month from the Present Date.

protected void Page_Load(object sender, EventArgs e)
{
    Calendar1.EndDate = DateTime.Now.AddMonths(1); // Start Calendar after one month from Present Date
}

Note. For detailed code please download the Zip file.

Summary

I hope this article is useful for all readers and I also hope developers will follow this technique to avoid a hundred lines of code to do this, if you have any suggestions then please contact me.


Similar Articles