Calendar extender is a part of Ajax Control Toolkit. I will show you in this process how to implement it.
1. Create a new Web Site project.
Click File, New Web Site, then click ASP.NET Empty Web Site.
![ASP.NET Empty Web Site]()
2. Right click on project.
Click Add, Add New Item and then name the Web Form as Default.aspx,
![WebForm]()
3. Before using or giving reference of Ajax Control Toolkit, first know where you will get Ajax Control Tookit.
You will get the Ajax Control Tookit resource from the following Web sites:
ASP.NET Ajax Control Toolkit Reference.
![Ajax Control Tool Kit]()
![AjaxControlToolKit.dll file]()
Download Ajax Control Toolkit and give reference to AjaxControlToolKit.dll file in the project.
Right click on project and then Add Reference.
![AjaxControlToolKit]()
After adding reference, you can see the changes in solution explore,r as in the following screenshot:
![bin folder]()
4. Here I am going to implement Calendar Extender with TextBox.
5. ToolkitScriptManager is also required on the page to execute Ajax Control Kit items like Calendar Extender.
Why is ToolkitScriptManager not ScriptManager?
6. Default.aspx code
- <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
- <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
-
- <head runat="server">
- <title></title>
- </head>
-
- <body>
- <form id="form1" runat="server">
- <cc1:ToolkitScriptManager ID="toolScriptManageer1" runat="server"></cc1:ToolkitScriptManager>
- <div> Date of Birth
- <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>
- <cc1:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtDOB" Format="dd/MM/yyyy"> </cc1:CalendarExtender>
- </div>
- </form>
- </body>
-
- </html>
![Output]()
You can see the Calendar Extender start working in the above image.
Now, I will show you how to restrict for start date and end date.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- public partial class _Default: System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
-
-
- Calendar1.StartDate = DateTime.Now.AddYears(-11);
-
- Calendar1.EndDate = DateTime.Now;
- }
- }
You can set the
Calendar1.StartDate value.
You can set the
Calendar1.EndDate value inthe code behind.
![run]()
You can see in the above image I had restricted to select future date, with the help of the code behind.
-
- Calendar1.EndDate = DateTime.Now;
References