Populating form inputs using calendar control

HelenScott · Apr 28, 2012

this is a great article: http://aspnet.4guysfromrolla.com/articles/030202-1.2.aspx. However, if the form is runat=server and server side controls I cannot make it work. Any Help is greatly appreciated. Thanks ScotgtBut here's one that I whipped up....If you're just trying to populate a form control with the caledar value, this'll do it, though I used a different method than in the article. YOu actually have to hit a submit button, for what it's worth. <%@ Page Language="VB" %> <script runat="server"> Sub Page_Load(obj As Object, e As EventArgs) If Not Page.IsPostBack Then tbStart.Text = "Please choose a date" End If End Sub Sub Do_Submit(Sender As Object, e As EventArgs) tbStart.Text = Cal1.SelectedDate End Sub </script> <html><body> <form runat="server"> <asp:Calendar id="Cal1" runat="server" BackColor="White" ForeColor="Blue" /> <asp:Button id="btnSubmit" text="Submit Date Selection" onClick="Do_Submit" runat="server" /> <asp:TextBox id="tbStart" runat="server" /> </form> </body></html> HTHThanks, however I really want the same funtionality of the original with server side controls. Let me know if this is possible. Thanks ScottWhat can't you get to work with the original code? What is the error you are getting? Can you post your modified code?Unfortunately the code is at work, I will post it in the AM. However, the problem seems to be that I am trying to use a form that has runat:server because I am using server side controls. If I change the form in your code (the rest left as is) I get the same error. ThanksHere is the error message after I change form to read: <form name="frmCalendar" runat=server> Microsoft JScript runtime error: 'window.opener.frmCalendar.txtDate' is null or not an object Thanks!You also need to add id="frmCalendar" to use it with server-side form inputs. Otherwise asp.net gives it an auto id which is usually something like _ct10 or something. Sorry this was not in the original article, I am going to add it when I get the chance.Thanks, but I still get same error. Form = <form id="frmcalendar" name="frmCalendar" runat=server> --- This is the only line that is different. Before I change this line it works perfectly. Error line= window.opener.frmCalendar.txtDate.value = '3/16/2002' Error = Microsoft JScript runtime error: 'window.opener.frmCalendar.txtDate' is null or not an objectI had it working fine last night at home. I will post the code when I get home tonight. Can you show me the entire page? Did you change anything with the txtDate field?Thanks! Here is the code. Calendar.aspx: --------------- <%@ Page Language="vb" %> <script runat="server"> Private Sub Calendar1_SelectionChanged(sender As Object, e As System.EventArgs) Dim strjscript as string = "<script language=""javascript"">" strjscript = strjscript & "window.opener." & Httpcontext.Current.Request.Querystring("formname") & ".value = '" & Calendar1.SelectedDate & "';window.close();" strjscript = strjscript & "</script" & ">" 'Don't Ask, Tool Bug Literal1.text = strjscript End Sub Private Sub Calendar1_DayRender(sender As Object, e As System.Web.UI.WebControls.DayRenderEventArgs) If e.Day.Date = datetime.now().tostring("d") Then e.Cell.BackColor = System.Drawing.Color.LightGray End If End Sub </script> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Choose a Date</title> </head> <body leftmargin="0" topmargin="0"> <form runat="server" ID="Form1"> <asp:Calendar id="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged" OnDayRender="Calendar1_dayrender" showtitle="true" DayNameFormat="FirstTwoLetters" SelectionMode="Day" BackColor="#ffffff" FirstDayOfWeek="Monday" BorderColor="#000000" ForeColor="#00000" Height="60" Width="120"> <TitleStyle backcolor="#000080" forecolor="#ffffff" /> <NextPrevStyle backcolor="#000080" forecolor="#ffffff" /> <OtherMonthDayStyle forecolor="#c0c0c0" /> </asp:Calendar> <asp:Literal id="Literal1" runat="server"></asp:Literal> </form> </body> </html> --------------------------------------- Webform1.aspx - From that calls the calendar. -------------------------------------------------- <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="WebApplication13.WebForm1"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>WebForm1</title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout"> <form id="frmcalendar" name="frmCalendar" runat=server > <input name="txtDate" type="text" /> <a href="javascript:calendar_window=window.open('calendar.a spx?formname=frmCalendar.txtDate','calendar_window ','width=154,height=188');calendar_window.focu s()"> Calendar </a> </form> </body> </html> Also try adding id="txtDate" to the text input. Then if it still does not work send the source of webform1.aspx after it is rendered by the browser.Thanks, id="txtdate" did not work. I do not understand what you mean by "send the source of webform1.aspx after it is rendered by the browser". Can you explain or send sample code? thanks for all of you help! I know this is getting to be a pain.When you pull the page up in the browser, do a view source and cut and paste that data. Also, what browser are you using for this?It is IE6. Did you want me to paste the data here? ----------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Choose a Date</title> </head> <body leftmargin="0" topmargin="0"> <form name="Form1" method="post" action="calendar.aspx?formname=frmCalendar.txtDate" id="Form1"> <input type="hidden" name="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" value="" /> <input type="hidden" name="__VIEWSTATE" value="dDwxODg4MTYwNjIxOzs+uGJvFviMA/euNsNOsNQ2TNdRkFA=" /> <script language="javascript">  </script> <table id="Calendar1" cellspacing="0" cellpadding="2" bordercolor="Black" border="0" style="color:#000000;background-color:White;border-color:Black;border-width:1px;border-style:solid;height:60px;width:120px;border-collapse:collapse;"> <tr><td colspan="7" style="background-color:Navy;"><table cellspacing="0" border="0" style="color:White;width:100%;border-collapse:collapse;"> <tr><td style="color:White;background-color:Navy;width:15%;"><a href="javascript:__doPostBack('Calendar1','V762')" style="color:White"><</a></td><td align="Center" style="width:70%;">March 2002</td><td align="Right" style="color:White;background-color:Navy;width:15%;"><a href="javascript:__doPostBack('Calendar1','V821')" style="color:White">></a></td></tr> </table></td></tr><tr><td align="Center">Mo</td><td align="Center">Tu</td><td align="Center">We</td><td align="Center">Th</td><td align="Center">Fr</td><td align="Center">Sa</td><td align="Center">Su</td></tr><tr><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','786')" style="color:Silver">25</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','787')" style="color:Silver">26</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','788')" style="color:Silver">27</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','789')" style="color:Silver">28</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','790')" style="color:#000000">1</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','791')" style="color:#000000">2</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','792')" style="color:#000000">3</a></td></tr><tr><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','793')" style="color:#000000">4</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','794')" style="color:#000000">5</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','795')" style="color:#000000">6</a></td><td align="Center" style="background-color:LightGrey;width:14%;"><a href="javascript:__doPostBack('Calendar1','796')" style="color:#000000">7</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','797')" style="color:#000000">8</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','798')" style="color:#000000">9</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','799')" style="color:#000000">10</a></td></tr><tr><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','800')" style="color:#000000">11</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','801')" style="color:#000000">12</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','802')" style="color:#000000">13</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','803')" style="color:#000000">14</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','804')" style="color:#000000">15</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','805')" style="color:#000000">16</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','806')" style="color:#000000">17</a></td></tr><tr><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','807')" style="color:#000000">18</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','808')" style="color:#000000">19</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','809')" style="color:#000000">20</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','810')" style="color:#000000">21</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','811')" style="color:#000000">22</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','812')" style="color:#000000">23</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','813')" style="color:#000000">24</a></td></tr><tr><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','814')" style="color:#000000">25</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','815')" style="color:#000000">26</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','816')" style="color:#000000">27</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','817')" style="color:#000000">28</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','818')" style="color:#000000">29</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','819')" style="color:#000000">30</a></td><td align="Center" style="width:14%;"><a href="javascript:__doPostBack('Calendar1','820')" style="color:#000000">31</a></td></tr><tr><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','821')" style="color:Silver">1</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','822')" style="color:Silver">2</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','823')" style="color:Silver">3</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','824')" style="color:Silver">4</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','825')" style="color:Silver">5</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','826')" style="color:Silver">6</a></td><td align="Center" style="color:Silver;width:14%;"><a href="javascript:__doPostBack('Calendar1','827')" style="color:Silver">7</a></td></tr> </table> </form> </body> </html> That does not look right. Your form is named form1, not frmCalendar. Let me send you the working code I have tonight.Thanks! I will look for it tonight. Below is the exact page that I have working with the calendar code from the article. <%@ Page %> <script runat="server"> </script> <html> <head> </head> <body> <form name="form2" runat="server" id="form2"> <input name="text1" type="text" /> <a href="javascript:calendar_window=window.open('calendar.a spx?formname=form2.text1','calendar_window','width =154,height=188');calendar_window.focus()">Calendar</a> </form> </body> </html> this works great. What if the text box also is runat=server? Will this work? Thanks!Nevermind, I got it to work. This is awesome! Thanks! I have been trying to do this for weeks.... thanks again.Glad it worked for you. I think we have the longest thread of the weak..

hello. One last question I promise. It works great with an input of type text, however I cannot get it to work with a asp:textbox. I have viewed the source after the page has rendered and made sure the name of the text box is correct. Should it work with a asp:textbox? Thanks (trying to make sure we keep the longest thread)Hello, It appears that the reason it will not work with an asp:textbox, is that when the page is rendered it gives the resulting input both a id and a name that match. If I give the standard input both a name and id it will not work either. Thanks ScottIt should work fine, and asp:textbox should render the same way as a html textbox to the client side. Let me test it again tonight and I will post it, but the other page had both a name and id and it worked.Try this out: <html> <head> </head> <body> <form id="form2" name="form2" runat="server"> <asp:TextBox id="text1" name="text1" runat="server"></asp:TextBox> <a href="javascript:calendar_window=window.open('calendar.a spx?formname=form2.text1','calendar_window','width =154,height=188');calendar_window.focus()">Calendar</a> </form> </body> </html> did this code work for you? i didnt work for me!What part of the code did not work for you?I was able to get it to work. However in another way. I will post the code in the AM. iam having the code with the <asp:Textbox> in a .ascx file and it's not working. When iam using the code and the file is .aspx it's working. Why can't i use a .ascx file for my <form> and <asp:Textbox>? (The .ascx is "included" in a .aspx file)One thing to check no matter how you are using this is to make sure smartnavigation is false. If it is true an error is returned saying the textbox1 is null.Hi, First, congratulations to all on the length of the thread. My problem is that the asp:TextBox I want to populate using the Calendar control is in a DataGrid (in fact, in the EditItemTemplate of a Template Column), and I am getting Scott’s

Populating form inputs using calendar control

HelenScott

New Member