csharp

How to Use AJAX Control Toolkit Calendar Extender With ASP.NET

In this article, we will learn how to use AJAX Control Toolkit Calendar Extender With ASP.NET.
Calendar extender is a part of Ajax Control Toolkit. I will show you each and every step on how to implement it.

Follow this step for using AJAX Control Toolkit Calendar Extender With ASP.NET.
Step 1: Open visual studio for Create a project.
Click File, New Project, then click ASP.NET Empty Web Site just like screenshot.

Step 2: Right, click on the Created project.
Click Add, Add New Item and then name the Web Form as WebForm1.aspx,

Step 3: Before using ajax CalendarExtender of Ajax Control Toolkit, first know where you will get Ajax Control Toolkit and how to add AjaxControlToolkit.
Click this link for Add ajax control toolkit in toolbox

Step 4: Here I am going to implement How to Use AJAX Control Toolkit Calendar Extender with TextBox.

step 5: ToolkitScriptManager is also required on the page to execute Ajax Control Kit items like Calendar Extender and the ToolkitScriptManager handles all dependency resolution. It is responsible for loading all of the JavaScript files required by a set of Ajax Control Toolkit controls.

Step 6: Open WebForm1.aspx page and then write this code.
[php]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AjaxCalender.WebForm1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
Pick Date:<asp:TextBox ID="txtdate" runat="server" ReadOnly="true"></asp:TextBox>
<asp:ImageButton ID="image1" runat="server" ImageUrl="~/calender1.png" Width="25px" Height="25px" />
<asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtdate"
PopupButtonID="image1" Format="dd/MM/yyyy">
</asp:CalendarExtender>
</div>
</form>
</body>
</html>

[/php]

Output

Leave a Reply

Your email address will not be published. Required fields are marked *