Search This Blog

Saturday 24 March 2018

How to set calendar in Textbox in asp.net using AJAX CalendarExtender


Step 1: - Right Click on Project Root folder => Click on Manage NuGet Packages… => Search Ajax in search box and Select AjaxControlToolkit from list => Click on Install button





Step 2: - Add AjaxCalendarExtender.aspx Web Form page in project

Step 3: - Design Page Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxCalendarExtender.aspx.cs" Inherits="AjaxControls.AjaxCalendarExtender" %>


<%@ 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:ScriptManager runat="server">
            </asp:ScriptManager>

            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1"
                DefaultView="Days" Format="dd/MM/yyyy"></asp:CalendarExtender>

            <br />

            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/cal.png" />

            <asp:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="TextBox2"
                PopupButtonID="ImageButton1" DefaultView="Days" Format="dd/MM/yyyy"></asp:CalendarExtender>
        </div>
    </form>
</body>
</html>


Note: - Don’t forget to add Images folder in project and cal.png image

Step 4: - Output




To download cal.png

Right Click and Save



1 comment: