前段時間用過一個酒店入住預約網站，當你點擊"入住時間"時會懸浮出一對并列的日歷，然后點擊左邊的日歷就能選擇入住時間，點擊右側的日歷就能自動得到離店時間，當時沒有太留意是怎么實現的，現在在做項目時，需要這樣的日期選擇功能，又到了那個網站查看了源代碼，發現好像是用js和div做出來的，在網上找了很多博客，希望得到這樣的代碼，但是都不盡如人意，由于我一點都不會js，這個模塊又很重要，所以干脆自己做一個用戶自定義控件吧，功能是實現了，但是美感和代碼質量是一定比不上在客戶端做了，如果有路過的朋友知道用js和div做我如下的效果，請一定給小女我留言，給我指點下迷津。 第一步：制作自定義用戶控件datecontrol.ascx，為了實現部分頁面刷新，使用了vs2008中的Ajax控件組，在頁面拖放scriptmanagerproxy及updatepanel控件，在updatepanel中放入一個label1、一個textbox1、一個button1，給button的text之中加入一個向下的箭頭（可以從word文檔中粘貼一個特殊符號▼，當然如果你有合適的ico也可以拖放一個p_w_picpathbutton，修飾的更漂亮一些），然后在這三個并排的控件后加一個<br>，另起一行加入一個標準的calendar1（web）控件，實現效果是當點擊button1時，才出現calendar1，textbox1的值就是選擇的日期，label1提供了一個只寫屬性，給這個日歷控件定義使用說明，如label1.value=“入店時間"或"開始時間"等。我們來看一下客戶端源代碼: 1<%@ Control Language="C#" AutoEventWireup="true" CodeFile="datecontrol.ascx.cs" Inherits="datecontrol" %>????????
2????????????????????????<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
3</asp:ScriptManagerProxy>
4???????????????????????? <asp:UpdatePanel ID="UpdatePanel1" runat="server">
5????????????????????????????????<ContentTemplate>
6????????????????????????????????????????<asp:Label ID="Label1" runat="server"></asp:Label>
7????????????????????????????????????????<asp:TextBox ID="TextBox1" runat="server" ValidationGroup="a"></asp:TextBox>
8????????????????????????????????????????<asp:Button ID="Button1" runat="server" Font-Size="XX-Small"????
9????????????????????????????????????????????????ForeColor="#006600" Height="22px" οnclick="Button1_Click" Text="▼"????
10????????????????????????????????????????????????Width="19px" /><br>
11????????????????????????????????????????<asp:Calendar ID="Calendar1" runat="server" BackColor="White"????
12????????????????????????????????????????????????BorderColor="#3366CC" BorderWidth="1px" CellPadding="1"????
13????????????????????????????????????????????????DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"????
14????????????????????????????????????????????????ForeColor="#003399" Height="82px"????
15????????????????????????????????????????????????onselectionchanged="Calendar1_SelectionChanged" Width="297px"????
16????????????????????????????????????????????????Visible="False">
17????????????????????????????????????????????????<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
18????????????????????????????????????????????????<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
19????????????????????????????????????????????????<WeekendDayStyle BackColor="#CCCCFF" />
20????????????????????????????????????????????????<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
21????????????????????????????????????????????????<OtherMonthDayStyle ForeColor="#999999" />
22????????????????????????????????????????????????<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
23????????????????????????????????????????????????<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
24????????????????????????????????????????????????<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px"????
25????????????????????????????????????????????????????????Font-Bold="True" Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
26????????????????????????????????????????</asp:Calendar>????????????????????????????????????????
27????????????????????????????????</ContentTemplate>
28????????????????????????</asp:UpdatePanel> 設計頁面的效果圖如下： 第二步：實現自定義控件服務器端代碼： 1using System.Linq;
2using System.Web;
3using System.Web.Security;
4using System.Web.UI;
5using System.Web.UI.HtmlControls;
6using System.Web.UI.WebControls;
7using System.Web.UI.WebControls.WebParts;
8using System.Xml.Linq;
9
10public partial class datecontrol : System.Web.UI.UserControl
11{????
12????????protected void Page_Load(object sender, EventArgs e)
13????????{????????????
14????????}
15????????//在拖放日歷控件是，先把它的visible=“false”；點擊button是日歷控件顯示出來。
16????????protected void Button1_Click(object sender, EventArgs e)
17????????{
18????????????????this.Calendar1.Visible = true;????????????
19????????}????
20???? //在日歷控件的選中事件中寫textbox1獲取選中的日期的方法，并且選擇后，日歷再隱藏。
21????????protected void Calendar1_SelectionChanged(object sender, EventArgs e)
22????????{
23????????????????this.TextBox1.Text = Calendar1.SelectedDate.ToShortDateString();
24????????????????this.Calendar1.Visible = false;
25????????}
26????????//提供一個只讀屬性，可以得到textbox1的內容text
27????????public string DateStr
28????????{
29????????????????get
30????????????????{
31????????????????????????return TextBox1.Text;
32????????????????}
33????????}
34????????//提供一個只寫屬性，可以按照你的用法自己填寫它的內容。
35????????public string LableText
36????????{
37????????????????set { Label1.Text = value; }
38????????}
39} 這樣一個自定義的日歷控件就寫完了。 第三步：具體使用。現在我們來看一下具體怎么用這個自定義控件，下面是我現在做的一個項目，有個頁面hisotrytime.aspx中用到時間段查詢，我就使用了在這個頁面中使用了兩個自定義的日歷控件，拖放到頁面上的<tr>中，他們分別是date1、date2.在使用這個控件時，因為用到了Ajax，就必須加入一個scriptmanager，具體為什么加，小女因為沒學過Ajax，只是在報錯時vs提示必須加我就加上了，結果好用。現在還沒有時間好好研究為什么，將來一定苦心專研技術，希望路過的朋友們提出自己的見解，我好吸取你的精華，加入到我的hisotrytime.aspx頁面的效果圖是這樣的。 設置自定義控件中lableText的只寫屬性（我們自己封裝好的只寫屬性第二步中的第35行），添加內容“開始時間：”，date2中lableText=“結束時間”； 在頁面hisotrytime.aspx中添加一個p_w_picpathbutton1，圖片顯示為“開始搜索”，也將是選擇完開始時間和結束時間后，點擊搜索，我的GridView7中，就填充好所有符合條件的數據，看一下我hisotrytime.aspx頁面的客服端代碼： 1using System;
2using System.Collections;
3using System.Configuration;
4using System.Data;
5using System.Linq;
6using System.Web;
7using System.Web.Security;
8using System.Web.UI;
9using System.Web.UI.HtmlControls;
10using System.Web.UI.WebControls;
11using System.Web.UI.WebControls.WebParts;
12using System.Xml.Linq;
13
14public partial class Teacher_hisotrytime : System.Web.UI.Page
15{
16????????string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
17????????DataOperate DO = new DataOperate();
18????????string marketid;
19????????string year;
20????????string sql;
21????????????
22????????protected void Page_Load(object sender, EventArgs e)
23????????{
24????????????????if (!this.IsPostBack)
25????????????????{//這個頁面下面（我沒有截圖的部分）是一個點擊GridView7中的button列所產生的數據顯示，我放到一個panel1中，頁面第一次加載是不體現，當點擊button傳入主鍵后才會顯示。
26????????????????????????this.Panel1.Visible = false;????????????????????????????????????????
27????????????????}
28????????????????//用一個隱藏控件保存主鍵，這樣頁面加載后不會丟失主鍵。
29????????????????marketid = HiddenField1.Value;
30????????}
31????????protected void ImageButton1_Click1(object sender, ImageClickEventArgs e)
32????????{
33???????????? string begindate= this.date1 .DateStr;//利用自定義控件的只讀屬性得到textbox中的text日期值作為開始時間
34???????????? string enddate = this.date2.DateStr;//利用自定義控件的只讀屬性得到textbox中的text日期值作為結束時間
35???????????? //當用戶沒有選取日期時，為避免報錯，就直接獲取當前時間
36????????????????if (begindate == "")
37???????????? {
38???????????????????? begindate = DateTime.Now.ToShortDateString();
39???????????? }
40???????????? if (enddate == "")
41???????????? {
42???????????????????? enddate = DateTime.Now.ToShortDateString();
43???????????? }
44???????????? //在market表中查詢符合我時間段的數據，利用數據源綁定控件SqlDataSource6，直接填充到GridView7中
45???????????? sql = "select * from market????where????marketdate between????'" + begindate + "'????and????'" + enddate + "'";
46????????????????//getdatatable（）方法是我寫的一個數據處理方法，返回查詢滿足sql條件的datatable。
47????????????????DataTable dt = DO.GetDataTable(sql);
48????????????????Label1.Text = "共有" + dt.Rows.Count + "個市場";
49????????????????SqlDataSource6.ConnectionString = constr;
50????????????????SqlDataSource6.SelectCommand = sql;
51????????????????GridView7.DataSourceID = SqlDataSource6.ID;
52????????}
53????//下面是對GridView7做操作，目的是點擊GridView7中的button列得到主鍵，我現在正在籌劃一個GridView系列專題，會具體講解下面的代碼。
54???????????? protected void GridView7_RowCommand(object sender, GridViewCommandEventArgs e)
55????????{
56????????????????if (e.CommandName == "cksj")//當鼠標點擊的所有命令名中是“cksj”的事件命令時發生如下：
57????????????????{
58????????????????????????marketid = e.CommandArgument.ToString();
59????????????????????????HiddenField1.Value = marketid;
60????????????????????????this.Panel1.Visible = true;
61????????????????????????gv6fill();
62????????????????????????yearlist();
63????????????????}
64????????} 第四步：寫客戶端的js腳本，提示開始時間不能大于結束時間，因為本人基本上不會js，所以從網上找到了一個獲得當前時間的一個js的代碼，在這里謝謝這位仁兄，下面我們來看一下客戶端源代碼。 1<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
????2????????<style type="text/css">
????3????????.style1
????4????????{
????5????????????????width: 100%;
????6????????}
????7????????????????.style4
????8????????????????{
????9????????????????????????width: 660px;
10????????????????}
11????????????????
12????????????????.style6
13????????????????{
14????????????????????????height: 15px;
15????????????????}
16????????</style>
17</asp:Content>
18<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
19<script language="javascript" >
20function getDate()
21{
22???? var d,s,t;
23????d=new Date();
24????s=d.getFullYear().toString(10)+"-";
25????t=d.getMonth()+1;
26????s+=(t>9?"":"0")+t+"-";
27????t=d.getDate();
28????s+=(t>9?"":"0")+t+" ";
29//????t=d.getHours();
30//????s+=(t>9?"":"0")+t+":";
31//????t=d.getMinutes();
32//????s+=(t>9?"":"0")+t+":";
33//????t=d.getSeconds();
34//????s+=(t>9?"":"0")+t;
35????return s;
36}
37function bj()
38{
39if(document .getElementById ("ctl00$ContentPlaceHolder1$date1$TextBox1").value=="")
40{
41var begin=getDate ();
42}
43else????
44{
45var begin=document.getElementById ("ctl00$ContentPlaceHolder1$date1$TextBox1").value;
46}
47if(document .getElementById ("ctl00$ContentPlaceHolder1$date2$TextBox1").value=="")
48{
49var end=getDate ();
50}
51else????
52{
53var end= document.getElementById ("ctl00$ContentPlaceHolder1$date2$TextBox1").value;
54}
55if(begin>end)
56{
57alert ("開始時間大于結束時間！");
58return false ;
59}
60else
61{
62return true ;
63}
64
65}
66
67</script>
68????????<table class="style1">
69????????????????<tr>
70????????????????????????<td style="font-weight: bold; font-size: x-large; color: #800000" colspan="2">
71????????????????????????????????<asp:ScriptManager ID="ScriptManager1" runat="server">
72????????????????????????????????</asp:ScriptManager>
73????????????????????????????????按創建時間查找市場????
74????????????????????????????????????????????????????????????????????????<asp:ImageButton ID="ImageButton1" runat="server" Height="26px"????
75????????????????????????????????????????????????????????????????????????????????ImageUrl="~/ICO/kaishi.gif" OnClientClick="return bj();"???? Width="79px" />
76????????????????????????????????????????????????????????????????</td>
77????????????????</tr>
78????????????????????????????????????????????????????????<tr>
79????????????????????????????????????????????????????????????????<td style="font-weight: bold; font-size:large; color: #800000" align="left"????
80????????????????????????????????????????????????????????????????????????valign="top">
81????????????????????????????????????????????????????????????????????????<uc1:date ID="date1" runat="server" LableText="開始時間：" />
82????????????????????????????????????????????????????????????????</td>
83????????????????????????????????????????????????????????????????????????<td style="font-weight: bold; font-size:large; color: #800000" align="left"????
84????????????????????????????????????????????????????????????????????????valign="top">
85????????????????????????????????????????????????????????????????????????<uc1:date ID="date2" runat="server" LableText="結束時間：" />
86????????????????????????????????????????????????????????????????</td>
87????????????????????????????????????????????????????????</tr>
88????????????????????????????????????????????????????????<tr>
89????????????????????????????????????????????????????????????????<td style="font-weight: bold; font-size:large; color: #800000" align="left"????
90????????????????????????????????????????????????????????????????????????colspan="2">
91????????????????????????????????????????????????????????????????????????<asp:Label ID="Label1" runat="server"></asp:Label>
92????????????????????????????????????????????????????????????????????????<asp:SqlDataSource ID="SqlDataSource6" runat="server"></asp:SqlDataSource>
93????????????????????????????????????????????????????????????????</td>
94????????????????????????????????????????????????????????</tr>
95????????????????????????????????????????????????????????<tr>
96????????????????????????<td class="style4" align="left" colspan="2">
97????????????????????????????????<asp:GridView ID="GridView7" runat="server" AutoGenerateColumns="False"????
98????????????????????????????????????????BackColor="White" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px"????
99????????????????????????????????????????CellPadding="3" ForeColor="Black" GridLines="Vertical" Width="107%"????
100????????????????????????????????????????onrowcommand="GridView7_RowCommand" DataKeyNames="id" >
101????????????????????????????????????????<FooterStyle BackColor="#CCCCCC" />
102????????????????????????????????????????<Columns>
103????????????????????????????????????????????????<asp:BoundField DataField="marketname" HeaderText="市場名稱" />
104????????????????????????????????????????????????<asp:BoundField DataField="marketpass" HeaderText="市場密碼" />
105????????????????????????????????????????????????<asp:BoundField DataField="marketyear" HeaderText="市場年份" />
106????????????????????????????????????????????????<asp:BoundField DataField="groupnum" HeaderText="市場組數" />
107????????????????????????????????????????????????<asp:BoundField DataField="csxj" HeaderText="初始現金" />
108????????????????????????????????????????????????<asp:BoundField DataField="marketdate" HeaderText="市場創建時間" />
109????????????????????????????????????????????????<asp:BoundField DataField="marketbz" HeaderText="市場描述" />
110????????????????????????????????????????????????<asp:BoundField DataField="marketover" HeaderText="市場完成情況"????/>
111????????????????????????????????????????????????<asp:TemplateField HeaderText="查看市場詳情">
112????????????????????????????????????????????????????????<ItemTemplate>
113????????????????????????????????????????????????????????????????<asp:LinkButton ID="LinkButton1" runat="server" CommandArgument='<%#Eval("id") %>'????
114????????????????????????????????????????????????????????????????????????CommandName="cksj">查看本市場企業數據</asp:LinkButton>
115????????????????????????????????????????????????????????</ItemTemplate>
116????????????????????????????????????????????????</asp:TemplateField>
117????????????????????????????????????????</Columns>
118????????????????????????????????????????<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
119????????????????????????????????????????<SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
120????????????????????????????????????????<HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
121????????????????????????????????????????<AlternatingRowStyle BackColor="#CCCCCC" />
122????????????????????????????????????????<EmptyDataTemplate>溫馨提示：當前沒有任何記錄</EmptyDataTemplate>
123????????????????????????????????</asp:GridView>
124????????????????????????</td>
125????????????????</tr> 第20行的getdate（）方法是獲取當前時間，第37行bj（）方法是比較開始時間不能大于結束時間，否則彈出對話款提示錯誤，在這里要說一下，39和47中的一串看似很奇怪的代碼就是執行我的hisotry.aspx頁面后，ie把我的自定義控件date1、date2中的textbox翻譯成我們看到的源代碼，找到這個源代碼后，才能在客戶端的腳本中判斷它的.value了。 以上就是我總結的獲取時間的日歷控件的步驟，希望大家能用得上。

轉載于:https://blog.51cto.com/leafwf/185702

總結

以上是生活随笔為你收集整理的利用Asp.net中的AJAX制作网页上自动选取开始日期及结束日期的用户自定义控件...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。