advertisement
Premier Club Log In/Registration
  Include Code  Search Tips
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   SKILLBUILDING  |   TIP BANK  |   SOURCEBANK  |   FORUMS  |   NEWSLETTERS
Browse DevX
Partners & Affiliates
advertisement
advertisement
Tip of the Day
Average Rating: 2.7/5 | Rate this item | 10 users have rated this item.
Expertise: Intermediate
Language: .NET
June 8, 2009
Create a Popup Calendar in ASP.NET

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:

  1. In Calendar.aspx, add these controls:
  2. <INPUT type="button" value="Pick" 
      onclick="PopupPicker('DateTextBox', 250, 250);">
    <asp:linkbutton ID="Linkbutton1" runat="server"  
      OnClientClick="PopupPicker('TextBox1',
      250, 250)">LinkButton</asp:linkbutton>
    
  3. Create a TextBox to display the selected date:
  4. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    
  5. Place the following JavaScript function in the Calendar.aspx page:
  6. <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>
    

  7. Create a new .aspx page named DatePicker.aspx. This is the page that pops up when users click the calendar LinkButton.
  8. Place an ASP.NET Calendar control on this page.
  9. Put the following code in the Calendar's DayRender event handler:
  10. // 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
    

  11. Copy the following JavaScript function into DatePicker.aspx.
  12. <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.

Anmol Gupta
If you have a hot tip and we publish it, we'll pay you. However, due to accounting overhead we no longer pay $10 for a single tip submission. You must accumulate 10 acceptable tips to receive payment. Be sure to include a clear explanation of what the technique does and why it's useful. If it includes code, limit it to 20 lines if possible. Submit your tip here.
Please rate this item (5=best)
 1  2  3  4  5
advertisement
advertisement
Advertising Info  |   Member Services  |   Permissions  |   Contact Us  |   Help  |   Feedback  |   Site Map  |   Network Map  |   About

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs