Custom Calender Control in Asp.Net web page using Ajax

Create a Sample Webpage in Visual Studio, Download Ajax Toolkit  library from here. and add that dll into your reference and add this code in second line of you aspx page to add the Ajax control to Assembly.
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
Inside body of the page Inside form tag declare the toolkit script manger tag like given below.

<form id="form1" runat="server">
    <asp:ToolkitScriptManager runat="server" ID="toolscriptmgr"></asp:ToolkitScriptManager>
For Default Ajax Calender Create a TextBox and add the Calender Extender Tag Like this.

 <td nowrap="nowrap">Pic Date</td>
    <td><asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    <asp:CalendarExtender ID="dpCalender" runat="server"  Format="yyyy/MM/dd" TargetControlID="txtDate" ></asp:CalendarExtender>
    </td>

For Calender Control with Date Picker Image add one ImageButton box also.

 <td>Pic Date
    </td>
    <td><asp:TextBox ID="txtDate1" runat="server" ></asp:TextBox>
    <asp:CalendarExtender ID="dpCalender1" runat="server" Format="yyyy/MM/dd" TargetControlID="txtDate1" PopupButtonID="calenderimage"></asp:CalendarExtender>
    <asp:ImageButton ID="calenderimage" runat="server" ImageUrl="~/images/cal.gif" ></asp:ImageButton>
    </td>

This will give you the custom calender controls.

Whole Code In Single Slot.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="calender.aspx.cs" Inherits="calender.calender" %>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<!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:ToolkitScriptManager runat="server" ID="toolscriptmgr"></asp:ToolkitScriptManager>
    <div>
    <table>
    <tr>
    <td nowrap="nowrap">Pic Date</td>
    <td><asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    <asp:CalendarExtender ID="dpCalender" runat="server"  Format="yyyy/MM/dd" TargetControlID="txtDate" ></asp:CalendarExtender>
    </td>
    </tr>
    <tr>
    <td>Pic Date
    </td>
    <td><asp:TextBox ID="txtDate1" runat="server" ></asp:TextBox>
    <asp:CalendarExtender ID="dpCalender1" runat="server" Format="yyyy/MM/dd" TargetControlID="txtDate1" PopupButtonID="calenderimage"></asp:CalendarExtender>
    <asp:ImageButton ID="calenderimage" runat="server" ImageUrl="~/images/cal.gif" ></asp:ImageButton>
    </td>
    </tr>
    </table>
    </div>
    </form>
</body>
</html>

0 comments: