1)Drag a TextBox to the WebForm and name it as 'txtDate'. 2)Drag a Html Button and change the text as 'Date'.
Now write a JavaScript function to open the popup that is containing the Calender Control.
function PopupPicker(ctl) { var PopupWindow=null; PopupWindow=window.open('Calender.aspx?ctl='+ctl,'','width=250,height=250'); PopupWindow.focus(); }
Pass the textbox control name as a querystring(here ctl) to the popup,so that the pop up window can populate the textbox control in the parent window with the date selected by you.
<input id="Button2" type="button" value="Click" onclick="PopupPicker('txtDate');"/>
Since, we are passing the textbox id as a querystring we can reuse this control in multiple places in our project.
Building Calender.aspx
1)Drag a Calendar Control into the webform. 2)Get the TextBox Control Name that is coming as query string. 3)Fill the Parent form's textbox with the selected date by using the following JavaScript function. (The code is self explanatory). function SetDate(dateValue,ctl) { thisForm = window.opener.document.forms[0].elements[ctl].value= dateValue; self.close(); }
Now in clnDatePicker_DayRender Event,write the follow code to call the javascript function 'SetDate'.
string ctrl = Request.QueryString["ctl"];
HyperLink hpl = new HyperLink(); hpl.Text = ((LiteralControl)e.Cell.Controls[0]).Text; hpl.NavigateUrl = "javascript:SetDate('" + e.Day.Date.ToShortDateString() + "','"+ctrl+"');"; e.Cell.Controls.Clear(); e.Cell.Controls.Add(hpl);
By default, all the links rendered by the Calendar server control will generate a postback to the server. What we do instead of postback is, we will call our custom SetDate() JavaScript procedure. By Changing the table cell of the Calendar control to Hyperlink and calling the SetDate() JavaScript function in clnDatePicker_DayRender we can passs the selected date to the parent form.
|