How to Binding a Calendar Control in a Text box ASP.NET
First u create .Aspx or view page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>
<!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 id="Head1" runat="server">
<title>Eco Friend & Co. - Time Tracker - Select Date</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Microsoft Visual Studio, see http://msdn.microsoft.com/vstudio/" />
<meta name="Description" content="Select a date" />
<meta name="copyright" content="Copyright (c) 2011 Eco Friend & Company. All rights reserved." />
</head>
<body>
<form id="form1" runat="server">
<div id="calbg">
<div id="calcontent">
<fieldset>
<legend>SeleSelect a date: </legend>
<asp:DropDownList ID="MonthSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="MonthSelect_SelectedIndexChanged"></asp:DropDownList>
<asp:DropDownList ID="YearSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="YearSelect_SelectedIndexChanged">
</asp:DropDownList>
<asp:Calendar ID="Cal" runat="server" ShowTitle="False" ShowNextPrevMonth="False"
DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Sunday" OnSelectionChanged="Cal_SelectionChanged">
<TodayDayStyle Font-Bold="True" ForeColor="White" BackColor="#990000"></TodayDayStyle>
<DayStyle BorderWidth="2px" ForeColor="#666666" BorderStyle="Solid" BorderColor="White"
BackColor="#EAEAEA"></DayStyle>
<DayHeaderStyle ForeColor="#649CBA"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" ForeColor="#333333" BackColor="#FAAD50"></SelectedDayStyle>
<WeekendDayStyle ForeColor="White" BackColor="#BBBBBB"></WeekendDayStyle>
<OtherMonthDayStyle ForeColor="#666666" BackColor="White"></OtherMonthDayStyle>
</asp:Calendar>
<br />
<table>
<tr>
<td valign="middle" colspan="2">
Date Selected:
<asp:Label ID="lblDate" runat="server">
</asp:Label>
<input id="datechosen" type="hidden" name="datechosen" runat="server">
</td>
</tr>
<tr>
<td valign="middle">
<asp:Button ID="OKButton" runat="server" Text="OK" />
</td>
<td valign="middle">
<asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClientClick="javascript:self.close()"/>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</form>
</body>
</html>
then Aspx.cs design
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Calendar : System.Web.UI.Page
{
public string controlToEdit;
public string isPostBack;
public Calendar()
{
LoadComplete += new EventHandler(Page_LoadComplete);
}
void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
controlToEdit = Request.QueryString["controlID"];
Session.Add("controlToEdit", controlToEdit);
isPostBack = Request.QueryString["isPostBack"];
Session.Add("isPostBack", isPostBack);
// Cast first day of the week from web.config file. Set it to the calendar
//Cal.FirstDayOfWeek = (System.Web.UI.WebControls.FirstDayOfWeek)Convert.ToInt32(ConfigurationManager.AppSettings["FirstDayOfWeek"]);
// Select the Correct date for Calendar from query string
// If fails, pick the current date on Calendar
try
{
Cal.SelectedDate = Cal.VisibleDate = Convert.ToDateTime(lblDate.Text);
}
catch
{
Cal.SelectedDate = Cal.VisibleDate = DateTime.Today;
}
// Fills in correct values for the dropdown menus
FillCalendarChoices();
SelectCorrectValues();
}
else
{
if (Session["controlToEdit"] != null)
controlToEdit = (string)Session["controlToEdit"];
if (Session["isPostBack"] != null)
isPostBack = (string)Session["isPostBack"];
}
}
void Page_LoadComplete(object sender, System.EventArgs e)
{
OKButton.OnClientClick = "javascript:window.opener.SetControlValue('" + this.controlToEdit + "','" + lblDate.Text + "','" + this.isPostBack + "');";
}
protected void FillCalendarChoices()
{
DateTime thisdate = (DateTime.Now).AddYears(5);
// Fills in month values
for (int x = 0; x < 12; x++)
{
// Loops through 12 months of the year and fills in each month value
ListItem li = new ListItem(thisdate.ToString("MMMM"), thisdate.Month.ToString());
MonthSelect.Items.Add(li);
//to add next next month name to the monthselect drop downlist control like aug then sept and so on....
thisdate = thisdate.AddMonths(1);
}
// Fills in year values and change y value to other years if necessary
for (int y = 2000; y <= thisdate.Year; y++)
{
YearSelect.Items.Add(y.ToString());
}
}
protected void SelectCorrectValues()
{
lblDate.Text = Cal.SelectedDate.ToShortDateString();
datechosen.Value = lblDate.Text;
MonthSelect.SelectedIndex = MonthSelect.Items.IndexOf(MonthSelect.Items.FindByValue(Cal.SelectedDate.Month.ToString()));
YearSelect.SelectedIndex = YearSelect.Items.IndexOf(YearSelect.Items.FindByValue(Cal.SelectedDate.Year.ToString()));
}
protected void Cal_SelectionChanged(object sender, System.EventArgs e)
{
Cal.VisibleDate = Cal.SelectedDate;
SelectCorrectValues();
}
protected void MonthSelect_SelectedIndexChanged(object sender, System.EventArgs e)
{
Cal.SelectedDate = Cal.VisibleDate
= new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
SelectCorrectValues();
}
protected void YearSelect_SelectedIndexChanged(object sender, System.EventArgs e)
{
Cal.SelectedDate = Cal.VisibleDate
= new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
SelectCorrectValues();
}
}
First u create .Aspx or view page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Calendar.aspx.cs" Inherits="Calendar" %>
<!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 id="Head1" runat="server">
<title>Eco Friend & Co. - Time Tracker - Select Date</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="generator" content="Microsoft Visual Studio, see http://msdn.microsoft.com/vstudio/" />
<meta name="Description" content="Select a date" />
<meta name="copyright" content="Copyright (c) 2011 Eco Friend & Company. All rights reserved." />
</head>
<body>
<form id="form1" runat="server">
<div id="calbg">
<div id="calcontent">
<fieldset>
<legend>SeleSelect a date: </legend>
<asp:DropDownList ID="MonthSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="MonthSelect_SelectedIndexChanged"></asp:DropDownList>
<asp:DropDownList ID="YearSelect" runat="server" AutoPostBack="True" OnSelectedIndexChanged="YearSelect_SelectedIndexChanged">
</asp:DropDownList>
<asp:Calendar ID="Cal" runat="server" ShowTitle="False" ShowNextPrevMonth="False"
DayNameFormat="FirstTwoLetters" FirstDayOfWeek="Sunday" OnSelectionChanged="Cal_SelectionChanged">
<TodayDayStyle Font-Bold="True" ForeColor="White" BackColor="#990000"></TodayDayStyle>
<DayStyle BorderWidth="2px" ForeColor="#666666" BorderStyle="Solid" BorderColor="White"
BackColor="#EAEAEA"></DayStyle>
<DayHeaderStyle ForeColor="#649CBA"></DayHeaderStyle>
<SelectedDayStyle Font-Bold="True" ForeColor="#333333" BackColor="#FAAD50"></SelectedDayStyle>
<WeekendDayStyle ForeColor="White" BackColor="#BBBBBB"></WeekendDayStyle>
<OtherMonthDayStyle ForeColor="#666666" BackColor="White"></OtherMonthDayStyle>
</asp:Calendar>
<br />
<table>
<tr>
<td valign="middle" colspan="2">
Date Selected:
<asp:Label ID="lblDate" runat="server">
</asp:Label>
<input id="datechosen" type="hidden" name="datechosen" runat="server">
</td>
</tr>
<tr>
<td valign="middle">
<asp:Button ID="OKButton" runat="server" Text="OK" />
</td>
<td valign="middle">
<asp:Button ID="CancelButton" runat="server" Text="Cancel" OnClientClick="javascript:self.close()"/>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</form>
</body>
</html>
then Aspx.cs design
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class Calendar : System.Web.UI.Page
{
public string controlToEdit;
public string isPostBack;
public Calendar()
{
LoadComplete += new EventHandler(Page_LoadComplete);
}
void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
controlToEdit = Request.QueryString["controlID"];
Session.Add("controlToEdit", controlToEdit);
isPostBack = Request.QueryString["isPostBack"];
Session.Add("isPostBack", isPostBack);
// Cast first day of the week from web.config file. Set it to the calendar
//Cal.FirstDayOfWeek = (System.Web.UI.WebControls.FirstDayOfWeek)Convert.ToInt32(ConfigurationManager.AppSettings["FirstDayOfWeek"]);
// Select the Correct date for Calendar from query string
// If fails, pick the current date on Calendar
try
{
Cal.SelectedDate = Cal.VisibleDate = Convert.ToDateTime(lblDate.Text);
}
catch
{
Cal.SelectedDate = Cal.VisibleDate = DateTime.Today;
}
// Fills in correct values for the dropdown menus
FillCalendarChoices();
SelectCorrectValues();
}
else
{
if (Session["controlToEdit"] != null)
controlToEdit = (string)Session["controlToEdit"];
if (Session["isPostBack"] != null)
isPostBack = (string)Session["isPostBack"];
}
}
void Page_LoadComplete(object sender, System.EventArgs e)
{
OKButton.OnClientClick = "javascript:window.opener.SetControlValue('" + this.controlToEdit + "','" + lblDate.Text + "','" + this.isPostBack + "');";
}
protected void FillCalendarChoices()
{
DateTime thisdate = (DateTime.Now).AddYears(5);
// Fills in month values
for (int x = 0; x < 12; x++)
{
// Loops through 12 months of the year and fills in each month value
ListItem li = new ListItem(thisdate.ToString("MMMM"), thisdate.Month.ToString());
MonthSelect.Items.Add(li);
//to add next next month name to the monthselect drop downlist control like aug then sept and so on....
thisdate = thisdate.AddMonths(1);
}
// Fills in year values and change y value to other years if necessary
for (int y = 2000; y <= thisdate.Year; y++)
{
YearSelect.Items.Add(y.ToString());
}
}
protected void SelectCorrectValues()
{
lblDate.Text = Cal.SelectedDate.ToShortDateString();
datechosen.Value = lblDate.Text;
MonthSelect.SelectedIndex = MonthSelect.Items.IndexOf(MonthSelect.Items.FindByValue(Cal.SelectedDate.Month.ToString()));
YearSelect.SelectedIndex = YearSelect.Items.IndexOf(YearSelect.Items.FindByValue(Cal.SelectedDate.Year.ToString()));
}
protected void Cal_SelectionChanged(object sender, System.EventArgs e)
{
Cal.VisibleDate = Cal.SelectedDate;
SelectCorrectValues();
}
protected void MonthSelect_SelectedIndexChanged(object sender, System.EventArgs e)
{
Cal.SelectedDate = Cal.VisibleDate
= new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
SelectCorrectValues();
}
protected void YearSelect_SelectedIndexChanged(object sender, System.EventArgs e)
{
Cal.SelectedDate = Cal.VisibleDate
= new DateTime(Convert.ToInt32(YearSelect.SelectedItem.Value),
Convert.ToInt32(MonthSelect.SelectedItem.Value), 1); ;
SelectCorrectValues();
}
}
and call and other page
create only aspx page not need and code of it.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title>
<script type="text/javascript" src="javascript/script.js">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
<a href="javascript:OpenPopupPage('Calendar.aspx','<%= txtDate.ClientID %>','<%= Page.IsPostBack %>');">
<img src="images/icon-calendar.gif" /></a>
</div>
</form>
</body>
</html>

No comments:
Post a Comment