Create a Popup Calendar in ASP.NET

June 27th, 2009 by payam

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. 
    LinkButton
    
  3. Create a TextBox to display the selected date:
  4. 
    
  5. Place the following JavaScript function in the Calendar.aspx page:
  6. 
    
  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. 
    

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.

source :: devx

Posted in Programing | No Comments »

Support us

Your Donation Will Be Used To Pay For Hosting Service. Help Keep Our Web Site Online With a Donation!

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.