ASP.NET中實(shí)現(xiàn)彈出日歷示例
在.net中彈出日歷的方法有很多種,這里介紹直接使用.net來實(shí)例,我們當(dāng)然還可以使用js日歷來實(shí)例哦,下面我分別簡(jiǎn)單舉兩個(gè)實(shí)例吧。有需要的朋友可以了解一下。
代碼如下:
<%@ 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) { // 在此處放置用戶代碼以初始化頁(yè)面 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 窗體設(shè)計(jì)器生成的代碼 override protected void OnInit(EventArgs e) { // // CODEGEN: 該調(diào)用是 ASP.NET Web 窗體設(shè)計(jì)器所必需的。 // InitializeComponent(); base.OnInit(e); } /// <summary> /// 設(shè)計(jì)器支持所需的方法 - 不要使用代碼編輯器 /// 修改此方法的內(nèi)容。 /// </summary> private void InitializeComponent() { this.Calendar1.SelectionChanged += new System.EventHandler(this.Calendar1_SelectionChanged); this.Load += new System.EventHandler(this.Page_Load); } #endregion #region 日歷選擇時(shí)的事件 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 } }
好了下面結(jié)果js+.net實(shí)現(xiàn)彈出日歷
在需要調(diào)用日期選擇的頁(yè)面放置兩個(gè)TEXTBOX與BUTTON以選擇開始時(shí)間與結(jié)束時(shí)間,并在html代碼的 </body>之前加入如下
javascript語(yǔ)句:
<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>
以上語(yǔ)句定義了兩個(gè)模態(tài)對(duì)話框,當(dāng)調(diào)用模態(tài)對(duì)話框時(shí)打開CalendarForm2.aspx頁(yè)面選擇日期,本頁(yè)面窗體FORM名稱為Form1,兩個(gè)TextBox分別接收傳遞進(jìn)來的兩個(gè)時(shí)間值而且應(yīng)該能互不影響。注意html中窗體的定義應(yīng)該與javascript中定義的對(duì)應(yīng)并且應(yīng)該是服務(wù)器端運(yùn)行的,如<form id="Form1" method="post" runat="server">。
在本頁(yè)面WebForm1.aspx.cs代碼部分頁(yè)面加載Page_Load事件內(nèi)加入如下語(yǔ)句將定義的javascript行為賦予Button:
ButtonBeginDate.Attributes.Add("onclick", "openModeBegin()"); ButtonEndDate.Attributes.Add("onclick", "openModeEnd()");
CalendarForm2.aspx是個(gè)臨時(shí)容器,提供框架調(diào)用CalendarForm3.aspx的內(nèi)容,以備關(guān)掉日期選擇窗體后無法完成傳值,在其html的Head標(biāo)記之間應(yīng)該加入如下語(yǔ)句:
代碼如下:
<script id="clientEventHandlersJS" language="javascript"> <!-- function IFRAME1_onblur() {} //--> </script>
CalendarForm2.aspx.cs文件中亦不需要寫任何代碼,只需在body標(biāo)記之間加入如下代碼:
代碼如下:
<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我們實(shí)際用到的日期選擇頁(yè)面包含一個(gè)日歷控件與一個(gè)Button一個(gè)TextBox,此處直接將日歷控件Calendar的選定值傳給第一個(gè)頁(yè)面WebForm1.aspx更簡(jiǎn)單,但我們沒有這樣做,不直接傳值主要是考慮到大多數(shù)用戶的使用習(xí)慣,在此將日歷控件選中的值傳給頁(yè)面上的TextBox,按下Button后再傳給WebForm1.aspx,還可以在用戶誤選后容易糾正。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- ASP.NET Calendar日歷(日期)控件使用方法
- asp.net中日歷函數(shù)Calendar的使用方法
- ASP.NET中為TextBox中添加calendar.js示例代碼
- ASP.NET中日歷控件和JS版日歷控件的使用方法(第5節(jié))
- 在ASP.NET中實(shí)現(xiàn)彈出日歷的具體方法
- ASP.NET技巧:為Blog打造個(gè)性日歷
- ASP.NET如何獲取兩個(gè)日期之間的天數(shù)
- asp.net 時(shí)間類 一周的周一和周末的日期
- asp.net 日期函數(shù) 某月的第一天和最后一天的日期
- Asp.net 時(shí)間操作基類(支持短日期,長(zhǎng)日期,時(shí)間差)
- asp.net(C#)實(shí)現(xiàn)功能強(qiáng)大的時(shí)間日期處理類完整實(shí)例
- asp.net基于Calendar實(shí)現(xiàn)blog日歷功能示例
相關(guān)文章
ASP.NET Datagridview自動(dòng)換行的小例子
這篇文章介紹了ASP.NET Datagridview自動(dòng)換行的代碼,有需要的朋友可以參考一下,希望對(duì)你有所幫助2013-07-07VS2010、VS2008等項(xiàng)目的默認(rèn)瀏覽器修改方法(圖文)
默認(rèn)情況下,VS會(huì)使用操作系統(tǒng)的默認(rèn)瀏覽器,但我在調(diào)試 ASP.NET 程序時(shí)更偏向于使用IE瀏覽器,下面與大家分享下VS2010、VS2008等項(xiàng)目的默認(rèn)瀏覽器的修改方法2013-05-05.NET Core Windows環(huán)境安裝配置教程
這篇文章主要為大家詳細(xì)介紹了.NET Core Windows環(huán)境安裝配置教程,感興趣的小伙伴們可以參考一下2016-07-07asp.net中g(shù)ridview的查詢、分頁(yè)、編輯更新、刪除的實(shí)例代碼
asp.net中g(shù)ridview的查詢、分頁(yè)、編輯更新、刪除的實(shí)例代碼,需要的朋友可以參考一下2013-03-03ASP.NET Core應(yīng)用錯(cuò)誤處理之ExceptionHandlerMiddleware中間件呈現(xiàn)“定制化錯(cuò)誤頁(yè)面”
這篇文章主要給大家介紹了關(guān)于ASP.NET Core應(yīng)用錯(cuò)誤處理之ExceptionHandlerMiddleware中間件呈現(xiàn)“定制化錯(cuò)誤頁(yè)面”的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧2019-01-01jQuery實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)的例子
這篇文章主要介紹了jQuery實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)的例子,需要的朋友可以參考下2014-05-05DataGridView中綁定DataTable數(shù)據(jù)及相關(guān)操作實(shí)現(xiàn)代碼
DataGridView中綁定DataTable數(shù)據(jù)及相關(guān)操作2010-02-02asp.net Accee數(shù)據(jù)庫(kù)連接不穩(wěn)定解決方案
我最最進(jìn)做了個(gè)網(wǎng)站,我是用VS2005 + Access 數(shù)據(jù)庫(kù)連接,可以我在連接的時(shí)候總是出現(xiàn)連接不穩(wěn)定的情況,同樣的代碼,一個(gè)字也沒改,就是連接不上,但是有的又連接的上。真是郁悶,真是弄死人。2009-07-07