Monday, September 24, 2012

CalendarExtender–AJAX Control

 

Introduction :

Now a days there are many forms on the internet where end user has to enter a date. It is very easy to provide Calendar tool to the user using this extender. CalendarExtender by default provides JavaScript functionality to convert selected date into different formats.

CalendarExtender also extends the functionality of textbox.

Example using CalendarExtender:

Step 1 : Register AjaxControlToolKit.

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagPrefix="ajaxToolkit" %>

Step 2 : Add ToolKitScriptManager to the page.



<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>

Step 3 : Drag and drop a textbox .


Step 4 : Now add CalendarExtender to the page and assign the textbox id to TargetControlID attribute.




<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Calendar Extender</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
Enter Date:<asp:TextBox ID="txtDate" runat="server" ReadOnly="true">
</asp:TextBox>
<br /> <br />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="txtDate" >
</ajaxToolkit:CalendarExtender>
</div>
</form>
</body>
</html>

As soon as user tries to enter date in the textbox , Calendar pops up and user can select a date.We can specify the format of date to be shown in the textbox using “format” attribute of this control.


Output :


CalendarExtender_op1


 


CalendarExtender_op2

No comments:

Post a Comment