前段时间用过一个酒店入住预约网站,当你点击"入住时间"时会悬浮出一对并列的日历,然后点击左边的日历就能选择入住时间,点击右侧的日历就能自动得到离店时间,当时没有太留意是怎么实现的,现在在做项目时,需要这样的日期选择功能,又到了那个网站查看了源代码,发现好像是用js和div做出来的,在网上找了很多博客,希望得到这样的代码,但是都不尽如人意,由于我一点都不会js,这个模块又很重要,所以干脆自己做一个用户自定义控件吧,功能是实现了,但是美感和代码质量是一定比不上在客户端做了,如果有路过的朋友知道用js和div做我如下的效果,请一定给小女我留言,给我指点下迷津。
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" onclick=
"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}
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 }
第一步:制作自定义用户控件datecontrol.ascx,为了实现部分页面刷新,使用了vs2008中的Ajax控件组,在页面拖放scriptmanagerproxy及updatepanel控件,在updatepanel中放入一个label1、一个textbox1、一个button1,给button的text之中加入一个向下的箭头(可以从word文档中粘贴一个特殊符号
▼,当然如果你有合适的ico也可以拖放一个imagebutton,修饰的更漂亮一些),然后在这三个并排的控件后加一个<br>,另起一行加入一个标准的calendar1(web)控件,
实现效果是当点击button1时,才出现calendar1,textbox1的值就是选择的日期,label1提供了一个只写属性,给这个日历控件定义使用说明,如label1.value=“入店时间"或"开始时间"等。我们来看一下客户端源代码:




























设计页面的效果图如下:

第二步:实现自定义控件服务器端代码:







































这样一个自定义的日历控件就写完了。
第三步:具体使用。现在我们来看一下具体怎么用这个自定义控件,下面是我现在做的一个项目,有个页面hisotrytime.aspx中用到时间段查询,我就使用了在这个页面中使用了两个自定义的日历控件,拖放到页面上的<tr>中,他们分别是date1、date2.在使用这个控件时,因为用到了Ajax,就必须加入一个scriptmanager,具体为什么加,小女因为没学过Ajax,只是在报错时vs提示必须加我就加上了,结果好用
。现在还没有时间好好研究为什么,将来一定苦心专研技术,希望路过的朋友们提出自己的见解,
我好吸取你的精华,加入到我的hisotrytime.aspx页面的效果图是这样的。




设置自定义控件
中lableText的只写属性(我们自己封装好的只写属性第二步中的第35行),添加内容“开始时间:”,date2中lableText=“结束时间”;
在页面hisotrytime.aspx中添加一个imagebutton1,图片显示为“开始搜索”,也将是选择完开始时间和结束时间后,点击搜索,我的GridView7中,就填充好所有符合条件的数据,看一下我hisotrytime.aspx页面的客服端代码:
































































第四步:写客户端的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>
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了。
以上就是我总结的获取时间的日历控件的步骤,希望大家能用得上。
本文转自叶子文文博客51CTO博客,原文链接http://blog.51cto.com/leafwf/185679如需转载请自行联系原作者
叶子文文