I dagens webbsidor så vill man att det ska vara lätt för en användare att kunna skriva in saker i ett fält. Då är det bra att ha ett popup fönster eller en javascript kalender man kan välja ett datum, sedan hamnar det i textboxen med hjälp av javascript. Jag hade tänkt visa ett exempel som använder asp:calendar. Vi behöver två .aspx sidor, Default.aspx och DatePicker.aspx. I Default så skriver vi in denna kod i <form> taggen,
<h1>Datum väljare</h1>
Event Namn: <asp:textbox id="txtEventName" runat="server" />
Datum: <asp:textbox id="txtEventDate" runat="server" />
<a href="javascript:;" onclick="calendarPicker('Form1.txtEventDate');" title="Välj ett datum från kalendern">Välj ett datum</a>
Det ser inte svårt ut alls? Det enda som kan vara lite svårt att förstår är a href:en som har en onclick="", det är en javascript funktion som gör så att vi öppnar ett popup fönster med asp:canlender i.
Såhär ser javascript funktionen ut
function calendarPicker(strField)
{
window.open('DatePicker.aspx?field=' + strField,'calendarPopup','width=250,height=190,resizable=yes');
}
I funktionen har vi en window.open() där vi väljer att öppna våran DatePicker.aspx i ett popup fönster. 'strField' är våran Form1.txtEventDate som finns i a href:en
Sedan i DatePicker.aspx.cs så har vi några rader kod som gör det möjligt att klicka på ett datum så det hamnar i txtEventDate.
private void Calendar1_DayRender(object sender, System.Web.UI.WebControls.DayRenderEventArgs e)
{
e.Cell.Controls.Clear();
System.Web.UI.HtmlControls.HtmlGenericControl Link = new System.Web.UI.HtmlControls.HtmlGenericControl();
Link.TagName = "a";
Link.InnerText = e.Day.DayNumberText;
Link.Attributes.Add("href", String.Format("JavaScript:window.opener.document.{0}.value = \'{1:d}\'; window.close();", Request.QueryString["field"], e.Day.Date));
e.Cell.Controls.Add(Link);
}
Vi använder DayRender för att kunna välja ett datum som ska läggas in i våran textbox. Vi skapar en a href med en länk för varje datum med javascript som gör så att det valda datumet hamnar i textboxen.
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}
private void InitializeComponent()
{
this.Calendar1.DayRender += new System.Web.UI.WebControls.DayRenderEventHandler(this.Calendar1_DayRender);
}
Instället för att skriva in Calendar1_DayRender i asp.net koden, så gör vi det med C# istället. Koden här ovan.
Exempel