Divergence Hosting Technical Blog

I’ve gotten alot of feedback on our popup ASP.NET calendar control I posted awhile back. In that post I did it with a “fake” popup using DIV’s. In this post, I will do it with a traditional popup window.

If you are looking to create the popup in a div as opposed to a seperate window (which will not be affected by popup blockers) see my other post here
Create popup date picker using ASP.NET calendar control

Remember that using this method is difficult these days as many popup blockers block this kind of popup.

First you need to add a textbox control and button to your page. Put the following code somewhere in your BODY section
<asp:TextBox ID="txtCal" runat="server" ReadOnly="true" />
<asp:ImageButton ID="imgCal" runat="server" OnClientClick="winopen(this);" ImageUrl="cal.png" />

Notice that we are calling the OnClientClick property and setting it to a function. This property calls a javascript function, so we need to add that function to the head section of the page.
<script language="javascript" type="text/javascript">
function winopen()
{
window.open ("cal.aspx","mywindow", "left=20,top=20,width=250,height=250,toolbar=0,resizable=0");
}
</script>

This javascript function opens a new popup window and set its window properties. In that new window, we have cal.aspx which will contain the ASP.NET calendar control.

You need to add a new page called cal.aspx and add the the control to the page.
<asp:Calendar ID="calendar" runat="server" OnSelectionChanged="calendar_Change" />

The calendar_Change handles the clicking of a date on the calendar. We need to handle this in the code behind. What we’re going to do in the code behind is write out some javascript to pass the date back to the main page and close the new window.

C#
protected void calendar_Change(object sender, EventArgs e)
{
string javascript = @"<script language=javascript>";
javascript += "window.opener.document.all.txtCal.value='" + calendar.SelectedDate + "'; window.close();";
javascript += "</script>";
Response.Write(javascript);
}

VB.NET
Protected Sub calendar_Change(ByVal sender As Object, ByVal e As EventArgs) Handles Calendar.SelectionChanged
Dim javascript As String = "<script language=javascript>"
javascript += "window.opener.document.all.txtCal.value='" & calendar.SelectedDate & "'; window.close();"
javascript += "</script>"
HttpContext.Current.Response.Write(javascript)
End Sub

Please feel free to leave a comment with questions if you have any!

I’ve included the source for this sample. You can get it here Popup calendar in seperate window sample code

If you are looking to create the popup in a div as opposed to a seperate window (which will not be affected by popup blockers) see my other post here
Create popup date picker using ASP.NET calendar control