This article will show you how you can create a calendar control
using AjaxControlToolkit CalendarExtender to display calendar for selecting
date in asp.net on textbox click example.
Some of my previous article are as follows: jQuery
Datepicker Calendar With Fold Effect Using jQuery In Asp.Net, jQuery
Datepicker Calendar With Bounce Effect Using jQuery In Asp.Net, Drag
and Drop UL, LI Item Top and Botton Using jQuery In Asp.Net, Execute
Or Open ModalPopupExtender as MessageBox From Code Behind Using C#.Net In
Asp.Net, Display
Validation in ToolTip Using ValidatorCalloutExtender in Asp.Net, AjaxControlToolkit
ModalPopupExtender With AutoCompleteExtender In Asp.Net Using C#.Net.
So for this article first we will create a new asp.net
application and add the below code into the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="asp"
%>
<!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>AjaxControlToolkit
CalendarExtender to Display Calendar in Asp.net on Textbox
Click</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<b>DOB : </b>
<asp:TextBox ID="TextBox1" runat="server" Width="200px" autocomplete="off"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="TextBox1">
</asp:CalendarExtender>
</form>
</body>
</html>
|
In above code I have used ScriptManager to register the
control and now in CalendarExtender and set the TargetControlID to assign on
click of which control calendar will open. Now we have done. Run the application
to check the output.
Now for selecting dob just click on month and year.
Now navigate the year and you will get the month now select the month the to get the date.
Now select the date, and if you reopen the calendar you will get the selected date which is present in the textbox.
About the Author
0 comments:
Please let me know your view