In this article I will explain how to use AJAX CalendarExtender Control that displays a
Calendar on click of a TextBox or an Image or an ImageButton or a Button and from
which date can be selected and displayed on a TextBox.
For using AJAX controls, first we have to add reference of AjaxControlToolKit.dll
to our Application and add AJAX Controls to the ToolBox.
Let me show the basic example of displaying Calendar when user clicks on a TextBox and
selected date is displayed on the TextBox. For this I have added TextBox control and Ajax CalendarExtender control to the webform. Also we have to add ScriptManager for the AJAX
controls to work. HTML code looks like this :
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="TextBox1">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
If we want to specify the format of the date we can use the property named Format of CalendarExtender as following :
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="TextBox1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Next I will show an example of displaying Calendar on clicking on an image. Here we have to specify the PopupButtonID as ID of the Image Control.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/cal.png"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="Image1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Similarly we can use PopupButtonID as that of ImageButton as following:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/cal.png"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="ImageButton1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Also we can use PopupButtonID as that of a Button as following :
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Show Calendar"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="Button1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Also in case if TextBox is inside TemplateField of a GridView, we can provide CalendarExtender control to it.
Calendar on click of a TextBox or an Image or an ImageButton or a Button and from
which date can be selected and displayed on a TextBox.
For using AJAX controls, first we have to add reference of AjaxControlToolKit.dll
to our Application and add AJAX Controls to the ToolBox.
Let me show the basic example of displaying Calendar when user clicks on a TextBox and
selected date is displayed on the TextBox. For this I have added TextBox control and Ajax CalendarExtender control to the webform. Also we have to add ScriptManager for the AJAX
controls to work. HTML code looks like this :
HTML Code(.aspx):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxCal.aspx.cs" Inherits="AjaxCal" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="TextBox1">
</cc1:CalendarExtender>
</div>
</form>
</body>
</html>
Output :
If we want to specify the format of the date we can use the property named Format of CalendarExtender as following :
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="TextBox1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Next I will show an example of displaying Calendar on clicking on an image. Here we have to specify the PopupButtonID as ID of the Image Control.
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/cal.png"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="Image1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Output :
Similarly we can use PopupButtonID as that of ImageButton as following:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/cal.png"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="ImageButton1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Also we can use PopupButtonID as that of a Button as following :
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Show Calendar"/>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
PopupButtonID="Button1" Format="dd/MM/yyyy">
</cc1:CalendarExtender>
Also in case if TextBox is inside TemplateField of a GridView, we can provide CalendarExtender control to it.
No comments:
Post a Comment