在ASP.NET中实现弹出日历

 

ctlcalendar.ascx的源代码：

<%@ control language="" autoeventwireup="false" codebehind="ctlcalendar.ascx.cs" inherits="calendar.ctlcalendar" targetschema="" enableviewstate="true"%>
<:textbox id="textbox1" runat="server"></asp:textbox>
<input type="button" id="button1" runat="server" value="..."><br>
<asp:panel id="pnlcalendar" runat="server" style="position: absolute">
 <asp:calendar id="calendar1" runat="server" firstdayofweek="monday" showgridlines="true" backcolor="white"
  daynameformat="full" forecolor="black" font-size="8pt" font-names="verdana" bordercolor="#999999"
  cellpadding="4" width="200px" height="180px">
  <todaydaystyle forecolor="black" backcolor="#cccccc"></todaydaystyle>
  <selectorstyle backcolor="#cccccc"></selectorstyle>
  <daystyle wrap="false" borderstyle="dashed"></daystyle>
  <nextprevstyle verticalalign="bottom"></nextprevstyle>
  <dayheaderstyle font-size="x-small" font-names="宋体" wrap="false" borderstyle="dashed" backcolor="#cccccc"></dayheaderstyle>
  <selecteddaystyle font-bold="true" forecolor="white" backcolor="#666666"></selecteddaystyle>
  <titlestyle font-size="small" font-bold="true" borderstyle="solid" bordercolor="black" backcolor="#999999"></titlestyle>
  <weekenddaystyle backcolor="lightsteelblue"></weekenddaystyle>
  <othermonthdaystyle forecolor="gray"></othermonthdaystyle>
 </asp:calendar>
</asp:panel>

ctlcalendar.ascx.cs的源代码：

namespace calendar
{
 using system;
 using system.data;
 using system.drawing;
 using system.web;
 using system.web.ui.webcontrols;
 using system.web.ui.htmlcontrols;

 /// <summary>
 ///  ctlcalendar 的摘要说明。
 /// </summary>
 public class ctlcalendar : system.web.ui.usercontrol
 {
  protected system.web.ui.webcontrols.textbox textbox1;
  protected system.web.ui.webcontrols.panel pnlcalendar;
  protected system.web.ui.htmlcontrols.htmlinputbutton button1;
  protected system.web.ui.webcontrols.calendar calendar1;

  private void page_load(object sender, system.eventargs e)
  {
   // 在此处放置用户代码以初始化页面
   if (!page.ispostback)
   {
    this.textbox1.text = system.datetime.now.toshortdatestring();
    this.pnlcalendar.attributes.add("style","display: none; position: absolute");
   }
   else
   {
    string id = page.request.form["__eventtarget"].substring(0,page.request.form["__eventtarget"].indexof(":"));
    if (id != this.id)
    {
     this.pnlcalendar.attributes.add("style","display: none; position: absolute");
    }
    else
    {
     this.pnlcalendar.attributes.add("style","position: absolute");
    }

   }

   page.registerclientscriptblock("script_panel" + this.id,
    "<script> function on"+this.id+"click() {  if("+this.id+
"_pnlcalendar.style.display == "none")     "+this.id+
"_pnlcalendar.style.display = "";   else    "+this.id+
"_pnlcalendar.style.display = "none"; } </script>");   
   this.button1.attributes.add("onclick","on"+this.id+"click()");
   
  }

  #region web 窗体设计器生成的代码
  override protected void oninit(eventargs e)
  {
   //
   // codegen: 该调用是 asp.net web 窗体设计器所必需的。
   //
   initializecomponent();
   base.oninit(e);
  }
  
  /// <summary>
  ///  设计器支持所需的方法 - 不要使用代码编辑器
  ///  修改此方法的内容。
  /// </summary>
  private void initializecomponent()
  {
   this.calendar1.selectionchanged += new system.eventhandler(this.calendar1_selectionchanged);
   this.load += new system.eventhandler(this.page_load);

  }
  #endregion

  #region 日历选择时的事件
  private void calendar1_selectionchanged(object sender, system.eventargs e)
  {
   this.textbox1.text = calendar1.selecteddate.toshortdatestring();
   this.pnlcalendar.attributes.add("style","display: none; position: absolute");
  }
  #endregion
 }
}