When we enter text in a web page, especially during a Form-Filling, Registration, searching, lookup... We always have to fill in a Date, although the rich Calendar control exist, while many people (including me) like to "PopUp" the Calendar, select a Date and then send this value back to the parent WebForm. As it would not only save our limited screen space on a WebForm, and we can also provide a better user experience. 

As we all know that, we have to use Javascript (window.open) to pop up a new browser window in a Asp.Net WebForm. However, how can we create the thing like DatePicker in a WebForm? how do we know which TextBox Control is going to be populated? How to send the selected date to the parent WebForm?

Therefore, a lots of commerical PopUp Calendar / Date Picker Control was born for this need. In this article, I'll show how to write a PopUp Calendar by yourself! i.e. PopUp a Calendar, change the Month and Year dynamically, and then send back the selected Date on the Calendar Control to the 'corresponding' TextBox(es) on the Parent WebForm!

<asp:TextBox id="txtEndDate" runat="server"/>
<a href="javascript:GetDate('txtEndDate')">
  <img alt="PopUp Calendar" src="../Images/SmallCalendar.gif" border="0" />
</a>

I wrote a small Javascrip function, which accept the control ID as an parameter, and then pop up a new browser window. In the same time, I'll pass 2 variables in the QueryString: WebForm and Control ID.

Why do I have to use Javascript to get the WebForm ID? Yes, the default WebForm ID created by VS.NET is "Form1", that mean you can hardcode it without any change/code. However, no WebForm ID is available in design time under WebMatrix by default, so we have to make sure that the correct WebForm as the parent WebForm. (As I'm a WebMatrix fan too... ) Therefore, we have to use pass these info: Which control have to be filled and what's the Form name.

Next, we create 3 Page-wide String Object in the child window (strSelectedDate, strFormName & strCtrlName) - each of them are used to store the Selected Date from the Calendar control, Parent Form ID and Requesting Control ID.

The first one can be filled in the OnSelectedIndexChanged event handler upon user click on a date. The other two are populated by the values in the QueryString. Finally, the most important part would be 'Passing the selected value back to the requesting control on the parent WebForm'. So we can:

1. reference to the parent window:
window.opener

2. reference to the parent WebForm:
window.opener.document.forms["<%= strFormName %>"]

3. reference to the requesting control in the parent WebForm:
window.opener.document.forms["<%= strFormName %>"].elements["<%= strCtrlName %>"]

So, we can assign the String object with the Selected Date value back:
"<%= strSelectedDate %>"

In this javascript, we'll make use of the 3 temporary String Object and then assign the value back to the control on the window.opener WebForm. Well... You can sure change the format of the selected Date on the TextBox(es) for your own by handling in the myCalendar_SelectionChanged event handler, and I used the format of "dd/MM/yyyy" in my demo. 

Demo           Download (Parent)            Download (PopUp Child)