ASP.NET中实现弹出日历示例
在.net中弹出日历的方法有很多种，这里介绍直接使用.net来实例，我们当然还可以使用js日历来实例哦，下面我分别简单举两个实例吧。有需要的朋友可以了解一下。
代码如下：
<%@ControlLanguage="c#"AutoEventWireup="false"Codebehind="ctlCalendar.ascx.cs"Inherits="calendar.ctlCalendar"TargetSchema="http://schemas.microsoft.com/intellisense/ie5"enableViewState="True"%> <asp:textboxid="TextBox1"runat="server"></asp:textbox> <inputtype="button"id="Button1"runat="server"value="..."><br> <asp:Panelid="pnlCalendar"runat="server"style="POSITION:absolute"> <asp:calendarid="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"> <TodayDayStyleForeColor="Black"BackColor="#CCCCCC"></TodayDayStyle> <SelectorStyleBackColor="#CCCCCC"></SelectorStyle> <DayStyleWrap="False"BorderStyle="Dashed"></DayStyle> <NextPrevStyleVerticalAlign="Bottom"></NextPrevStyle> <DayHeaderStyleFont-Size="X-Small"Font-Names="宋体"Wrap="False"BorderStyle="Dashed"BackColor="#CCCCCC"></DayHeaderStyle> <SelectedDayStyleFont-Bold="True"ForeColor="White"BackColor="#666666"></SelectedDayStyle> <TitleStyleFont-Size="Small"Font-Bold="True"BorderStyle="Solid"BorderColor="Black"BackColor="#999999"></TitleStyle> <WeekendDayStyleBackColor="LightSteelBlue"></WeekendDayStyle> <OtherMonthDayStyleForeColor="Gray"></OtherMonthDayStyle> </asp:calendar> </asp:Panel>
cs代码
namespacecalendar
{
usingSystem;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Web;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.HtmlControls;
///<summary>
///ctlCalendar的摘要说明。
///</summary>
publicclassctlCalendar:System.Web.UI.UserControl
{
protectedSystem.Web.UI.WebControls.TextBoxTextBox1;
protectedSystem.Web.UI.WebControls.PanelpnlCalendar;
protectedSystem.Web.UI.HtmlControls.HtmlInputButtonButton1;
protectedSystem.Web.UI.WebControls.CalendarCalendar1;
privatevoidPage_Load(objectsender,System.EventArgse)
{
//在此处放置用户代码以初始化页面
if(!Page.IsPostBack)
{
this.TextBox1.Text=System.DateTime.Now.ToShortDateString();
this.pnlCalendar.Attributes.Add("style","DISPLAY:none;POSITION:absolute");
}
else
{
stringid=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>functionOn"+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()");
}
#regionWeb窗体设计器生成的代码
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:该调用是ASP.NETWeb窗体设计器所必需的。
//
InitializeComponent();
base.OnInit(e);
}
///<summary>
///设计器支持所需的方法-不要使用代码编辑器
///修改此方法的内容。
///</summary>
privatevoidInitializeComponent()
{
this.Calendar1.SelectionChanged+=newSystem.EventHandler(this.Calendar1_SelectionChanged);
this.Load+=newSystem.EventHandler(this.Page_Load);
}
#endregion
#region日历选择时的事件
privatevoidCalendar1_SelectionChanged(objectsender,System.EventArgse)
{
this.TextBox1.Text=Calendar1.SelectedDate.ToShortDateString();
this.pnlCalendar.Attributes.Add("style","DISPLAY:none;POSITION:absolute");
}
#endregion
}
}
好了下面结果js+.net实现弹出日历
在需要调用日期选择的页面放置两个TEXTBOX与BUTTON以选择开始时间与结束时间，并在html代码的</body>之前加入如下
javascript语句：
<scriptlanguage="javascript">
functionopenModeBegin()
{
varreturnValue=window.showModalDialog("CalendarForm2.aspx",Form1.TextBoxBeginDate.value);
Form1.TextBoxBeginDate.value=returnValue;
}
</script>
<scriptlanguage="javascript">
functionopenModeEnd()
{
varreturnValue=window.showModalDialog("CalendarForm2.aspx",Form1.TextBoxEndDate.value);
Form1.TextBoxEndDate.value=returnValue;
}
</script>
以上语句定义了两个模态对话框，当调用模态对话框时打开CalendarForm2.aspx页面选择日期，本页面窗体FORM名称为Form1，两个TextBox分别接收传递进来的两个时间值而且应该能互不影响。注意html中窗体的定义应该与javascript中定义的对应并且应该是服务器端运行的，如<formid="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标记之间应该加入如下语句：
代码如下：
<scriptid="clientEventHandlersJS"language="javascript">
<!--
functionIFRAME1_onblur(){}
//-->
</script>
CalendarForm2.aspx.cs文件中亦不需要写任何代码，只需在body标记之间加入如下代码：
代码如下：
<bodyrunat="server"ID="Body1"> <formid="Form1"method="post"runat="server"> <iframeframeborder="no"src='CalendarForm3.aspx'style="WIDTH:480px;HEIGHT:450px"id="IFRAME1" language="javascript"onblur="returnIFRAME1_onblur()"></iframe> </form> </body>
CalendarForm3.aspx我们实际用到的日期选择页面包含一个日历控件与一个Button一个TextBox，此处直接将日历控件Calendar的选定值传给第一个页面WebForm1.aspx更简单，但我们没有这样做，不直接传值主要是考虑到大多数用户的使用习惯，在此将日历控件选中的值传给页面上的TextBox，按下Button后再传给WebForm1.aspx,还可以在用户误选后容易纠正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。