前段时间用过一个酒店入住预约网站,当你点击"入住时间"时会悬浮出一对并列的日历,然后点击左边的日历就能选择入住时间,点击右侧的日历就能自动得到离店时间,当时没有太留意是怎么实现的,现在在做项目时,需要这样的日期选择功能,又到了那个网站查看了源代码,发现好像是用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制作网页上自动选取开始日期及结束日期的用户自定义控件...相关推荐

  1. Asp.net中的AJAX学习记录之一 AJAX技术的崛起与Asp.net AJAX的诞生

      最近开始学习Asp.net中的AJAX,可能我的高手朋友们会说:"走还不稳呢!怎么就想学跑了?"呵呵!主要是我在做项目中体会到AJAX真的是很好的一门技术,应该好好的学习一下, ...

  2. asp.net 中 使用ajax 和浏览器的关系

    ====================================================== 注:本文源代码点此下载 ================================= ...

  3. asp.net实现在网页上自动显示超链接以及Email地址

    人们总喜欢在帖子中加上各种有用的URL链接或Email地址.而笔者当初设计时没有考虑到这一点,使得这些URL链接或Email地址只能以文字的形式而并不是以超链接的形式显示,其它浏览帖子的人还必须把这些 ...

  4. android谷歌补丁日期,在谷歌日历Android中添加开始日期和结束日期之间所有日期的事件...

    在谷歌日历 Android中添加开始日期和结束日期之间所有日期的事件.我希望每3个月剩余一次,直到结束日期. 这是我的功能 public void addEvent1(Context ctx, Str ...

  5. 有没有大佬知道,有哪些可以在网页上自动填写账号密码并登录的方法?

    有没有大佬知道,有哪些可以在网页上自动填写账号密码并登录的方法?比如说我开了十个隐身窗口,用十个小号来登录这个网站,但是手打太累了.所以想求助万能的大佬,有没有什么方法可以实现自动填写账号密码并登录的 ...

  6. ASP.NET中的AJAX应用开发详解

    [IT168 技术文档]其实AJAX应用的核心就是XMLHttpRequest,通过现象看本质,即使使用微软的AJAX服务器控件最终也是需要这些的,只不过使用微软AJAX服务器控件开发AJAX应用时我 ...

  7. ASP.NET中的AJAX应用开发总结

    11月21日晚7点应邀在武汉大学信息学院做了一场关于ASP.NET下AJAX开发的报告,以我自己经历讲述了一些特殊应用在过去到现在实现手段的变化,本来想回家之后做个总结的,但是由于最近以来事情一直很多 ...

  8. 在ASP.NET中实现AJAX

    对ASP.NET而言,Ajax不需要回传就能进行服务器端处理,从而使客户机(浏览器)具有丰富的服务器端能力.换句话说,它为异步指派和处理请求与服务器响应提供了一个框架. Asynchronous Ja ...

  9. ASP.Net 中操作Ajax

    有时候,越深入去了解一个点,越发觉得自己无知,而之前当自己晓得一两个片面的点还洋洋自得,殊不知,这是多么讽刺,JQuery中有很多优势,比如异步提交值,部分刷新,给用户很好的体验感.目前为止,大部分项 ...

最新文章

  1. Python-14-常用模块
  2. 2018.06.28 与或(线段树)
  3. linux中Daemon守护进程编程
  4. C++之运算符重载(2)
  5. 8. An Introduction to MCMC for Machine Learning (3)
  6. java中string范围_java中long parseLong(String s)方法中string(十进制数字)的范围?
  7. Mr.Xu的找实习之路
  8. 走一条硬件工程师的道路
  9. c语言程序设计一至六章测验,c语言程序设计1-6章.ppt
  10. python pip下载安装一半退出_Python- 解决PIP下载安装时因为网络速度慢而导致失败的方法...
  11. 详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景
  12. java pdf转jpg字体问题_java生成pdf字体的坑
  13. 云联惠认证身份_在秘乐短视频上实名认证了,输入了手机号,身份证号码,姓名,人脸识别,会被网贷吗?...
  14. Win10锁屏之后屏幕自动关闭怎么办
  15. 什么是第三方物流服务?
  16. 90%AI企业都亏损?阿里、华为等高管来苏畅谈人工智能
  17. 数据库CAST()函数,格式(CAST AS decimal)
  18. 【高老师软件需求分析】20级云班课习题答案合集
  19. 238. 银河英雄传说(并查集,扩展域)
  20. 20个计算机英语关键词,英语微课堂:20个专业体育英语术语,秒懂赛场关键词!...

热门文章

  1. linux中用户忘记root的密码--ubuntu版本
  2. 面经——C/C++常见面试知识点总结附面试真题
  3. 全国计算机等级考试题库二级C操作题100套(第16套)
  4. android reboot 定时重启可靠吗,请教一下有人做过安卓系统 reboot 重启之后,appium 能自动重新连接吗...
  5. Java中 a+=b和a=a+b有什么区别?
  6. php获取网络文件的几种方式,PHP如何实现获取网络上的文件?
  7. 程序员进阶架构师路线
  8. CSS一些实用的技巧
  9. mysql和php数据交互_php mysql交互
  10. 进程间的通信IPC(无名管道和命名管道)