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:
<INPUT type="button" value="Pick"
onclick="PopupPicker('DateTextBox', 250, 250);">
<asp:linkbutton ID="Linkbutton1" runat="server"
OnClientClick="PopupPicker('TextBox1',
250, 250)">LinkButton</asp:linkbutton>
- Create a TextBox to display the selected date:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
- Place the following JavaScript function in the Calendar.aspx page:
<script language=javascript>
function PopupPicker(ctl,w,h)
{
var PopupWindow=null;
settings='width='+ w + ',height='+ h + ',
location=no,directories=no,
menubar=no,toolbar=no,status=no,
scrollbars=no,resizable=no,
dependent=no';
PopupWindow=window.open('DatePicker.aspx?Ctl=' +
ctl,'DatePicker',settings);
PopupWindow.focus();
}
</script>
- 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:
// 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);
}
// VB
Protected 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
- Copy the following JavaScript function into DatePicker.aspx.
<script language="javascript">
function SetDate(dateValue)
{
// retrieve from the querystring the value of the Ctl param,
// that is the name of the input control on the parent form
// that the user want to set with the clicked date
ctl = window.location.search.substr(1).substring(4);
// set the value of that control with the passed date
thisForm = window.opener.document.forms[0].elements[ctl].value =
dateValue;
// close this popup
self.close();
}
</script>
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.