Background
Before AJAX Control Toolkit 4.0 or any other calender 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 the one sample application to do our task as:
- "Start" - "All Programs" - "Microsoft Visual Studio 2010".
- "File" - "New web Site" - "C#" - "Empty WebSite" (to avoid adding a master page).
- Provide the web site a name such as AjaxCalender or another as you wish and specify the location.
- Then right-click on Solution Explorer - "Add New Item" - "Default.aspx" page.
- Drag and drop one textbox and one ScriptManager from 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:
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<div align="center">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:CalendarExtenderID="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 dissable 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:
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 dissable 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:
Start 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 also I hope developers will follow this technique to avoid a hundred lines of code to do this, if you have any suggestion then please contact me.