Post
Ask Question

Use AJAX Control Toolkit Calendar Extender With ASP.NET

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.     <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>  
  3.         <!DOCTYPE html>  
  4.         <html xmlns="http://www.w3.org/1999/xhtml">  
  5.   
  6.         <head runat="server">  
  7.             <title></title>  
  8.         </head>  
  9.   
  10.         <body>  
  11.             <form id="form1" runat="server">  
  12.                 <cc1:ToolkitScriptManager ID="toolScriptManageer1" runat="server"></cc1:ToolkitScriptManager>  
  13.                 <div> Date of Birth  
  14.                     <asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>  
  15.                     <cc1:CalendarExtender ID="Calendar1" PopupButtonID="imgPopup" runat="server" TargetControlID="txtDOB" Format="dd/MM/yyyy"> </cc1:CalendarExtender>  
  16.                 </div>  
  17.             </form>  
  18.         </body>  
  19.   
  20.     </html>  
Output

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.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. public partial class _Default: System.Web.UI.Page  
  8. {  
  9.     protected void Page_Load(object sender, EventArgs e)  
  10.     {  
  11.         //I am writing this article on 9th January 2015  
  12.         //Selection Date Start from 09th Jan 2005  
  13.         Calendar1.StartDate = DateTime.Now.AddYears(-11);  
  14.         //Current date can be select but not future date.  
  15.         Calendar1.EndDate = DateTime.Now;  
  16.     }  
  17. }  
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.
  1. //Current date can be select but not future date.  
  2. Calendar1.EndDate = DateTime.Now;  

 

References


Similar Articles