Below is the example for creating a web user control for selecting date from a calendar and display in the textbox.
1.) Add .ascx file by choosing WebUserControl template
DateSelectControl.ascx
1.) Add .ascx file by choosing WebUserControl template
DateSelectControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateSelectControl.ascx.cs" Inherits="DateSelectControl" %>
<asp:TextBox ID="txtDate" runat="server"
style="margin-top:0px; z-index: 1; left: 45px; top: 40px; position: absolute;"></asp:TextBox>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl="~/Images/Calendar Icon.jpg"
style="margin-left: 10px;margin-top:50px; z-index: 1; left: 201px; top: -30px; position: absolute; height: 50px; width: 50px;"
onclick="ImageButton1_Click" /><br />
<asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged"
style="z-index: 1; left: 185px; top: 87px; position: absolute; height: 188px; width: 259px"
onvisiblemonthchanged="Calendar1_VisibleMonthChanged"></asp:Calendar>
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class DateSelectControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
Calendar1.Visible = false;
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
Calendar1.Visible = true;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
txtDate.Text = Calendar1.SelectedDate.ToString("dd MMM yyyy");
}
protected void Calendar1_VisibleMonthChanged(object sender, MonthChangedEventArgs e)
{
Calendar1.Visible = true;
}
//Create value Property
public String Value
{
get
{
return Calendar1.SelectedDate.ToString();
}
}
}
2.) Built it
3.) Add .aspx page to use the above control
UseDateselectcontrol.aspx
UseDateselectcontrol.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UseDateselectcontrol.aspx.cs" Inherits="UseDateselectcontrol" %>
<%@ Register src="DateSelectControl.ascx" tagname="DateSelectControl" tagprefix="uc1" %>
<!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">
<div>
<asp:Label ID="lbl1" runat ="server" Text ="Date Of Birth :" ></asp:Label>
<asp:Label ID="lbl2" runat ="server" Text ="" ></asp:Label>
</div>
<uc1:DateSelectControl ID="DateSelectControl1" runat="server" style="margin-left: 250px" />
</form>
</body>
</html>
UseDateselectcontrol.aspx.cs
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class UseDateselectcontrol : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
4.) Run UseDateselectcontrol.aspx you should see below interface
5.) Click On the Button Calendar will be displayed
6.) Select the date from calendar , date will be displayed in text box and calendar will disappear
No comments:
Post a Comment