Kalender väljare

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