This example assumes the main page from which users will pop up the calendar is named Calender.aspx. The following procedure shows how to create the popup calendar:
- In Calendar.aspx, add these controls:
- Create a TextBox to display the selected date:
- Place the following JavaScript function in the Calendar.aspx page:
- Create a new .aspx page named DatePicker.aspx. This is the page that pops up when users click the calendar LinkButton.
- Place an ASP.NET Calendar control on this page.
- Put the following code in the Calendar’s DayRender event handler:
- Copy the following JavaScript function into DatePicker.aspx.
LinkButton
// C#protected void Calendar1_DayRender( object sender, DayRenderEventArgs e){ HyperLink hlnk = new HyperLink(); hlnk.Text = ((LiteralControl)e.Cell.Controls[0]).Text; hlnk.Attributes.Add("href", "javascript:SetDate('" + e.Day.Date.ToShortDateString() + "')"); e.Cell.Controls.Clear(); e.Cell.Controls.Add(hlnk);}
// VBProtected Sub DatePicker_DayRender( ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles DatePicker.DayRender Dim hl As New HyperLink() hl.Text = CType(e.Cell.Controls(0), _ LiteralControl).Text hl.NavigateUrl = "javascript:SetDate( _ '" & e.Day.Date.ToShortDateString() & "');" e.Cell.Controls.Clear() e.Cell.Controls.Add(hl)End Sub
At this point, you should be able to click the button to pop up the calendar. When users select a date, the calendar popup window will close, and the selected date will appear in the Textbox.