ASP.NET中实现弹出日历示例

在.net中弹出日历的方法有很多种，这里介绍直接使用.net来实例，我们当然还可以使用js日历来实例哦，下面我分别简单举两个实例吧。有需要的朋友可以了解一下。

代码如下：

<%@ control language="c#" autoeventwireup="false" codebehind="ctlcalendar.ascx.cs" inherits="calendar.ctlcalendar" targetschema="http://schemas.microsoft.com/intellisense/ie5" enableviewstate="true"%>
<asp: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>

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
 }
}

好了下面结果js+.net实现弹出日历

在需要调用日期选择的页面放置两个textbox与button以选择开始时间与结束时间，并在html代码的 </body>之前加入如下

javascript语句：

<script language="javascript"> 
   function openmodebegin() 
   { 
   var returnvalue=window.showmodaldialog("calendarform2.aspx",form1.textboxbegindate.value);
   form1.textboxbegindate.value=returnvalue; 
   } 
 </script> 
 <script language="javascript"> 
   function openmodeend() 
   { 
   var returnvalue=window.showmodaldialog("calendarform2.aspx",form1.textboxenddate.value); 
   form1.textboxenddate.value=returnvalue; 
   } 
 </script>

以上语句定义了两个模态对话框，当调用模态对话框时打开calendarform2.aspx页面选择日期，本页面窗体form名称为form1，两个textbox分别接收传递进来的两个时间值而且应该能互不影响。注意html中窗体的定义应该与javascript中定义的对应并且应该是服务器端运行的，如<form id="form1" method="post" runat="server">。

在本页面webform1.aspx.cs代码部分页面加载page_load事件内加入如下语句将定义的javascript行为赋予button：
  

buttonbegindate.attributes.add("onclick", "openmodebegin()"); 
  buttonenddate.attributes.add("onclick", "openmodeend()");

calendarform2.aspx是个临时容器，提供框架调用calendarform3.aspx的内容，以备关掉日期选择窗体后无法完成传值，在其html的head标记之间应该加入如下语句：

代码如下：

<script id="clienteventhandlersjs" language="javascript"> 
<!-- 
function iframe1_onblur() {} 
//--> 
 </script>

calendarform2.aspx.cs文件中亦不需要写任何代码，只需在body标记之间加入如下代码： 

代码如下：

<body runat="server" id="body1"> 
 <form id="form1" method="post" runat="server"> 
  <iframe frameborder="no" src='calendarform3.aspx' style="width: 480px; height: 450px" id="iframe1" 
  language="javascript" onblur="return iframe1_onblur()"></iframe> 
 </form> 
</body>

calendarform3.aspx我们实际用到的日期选择页面包含一个日历控件与一个button一个textbox，此处直接将日历控件calendar的选定值传给第一个页面webform1.aspx更简单，但我们没有这样做，不直接传值主要是考虑到大多数用户的使用习惯，在此将日历控件选中的值传给页面上的textbox，按下button后再传给webform1.aspx,还可以在用户误选后容易纠正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。