欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-25 13:47:58
在.net中弹出日历的方法有很多种,这里介绍直接使用.net来实例,我们当然还可以使用js日历来实例哦,下面我分别简单举两个实例吧。有需要的朋友可以了解一下。 代码如...

在.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,还可以在用户误选后容易纠正。

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