免费素材哪个网站比较好,天元建设集团有限公司第四建筑工程公司,企业做网站建设遇到的问题,绍兴做网站公司哪家好前段时间用过一个酒店入住预约网站#xff0c;当你点击入住时间时会悬浮出一对并列的日历#xff0c;然后点击左边的日历就能选择入住时间#xff0c;点击右侧的日历就能自动得到离店时间#xff0c;当时没有太留意是怎么实现的#xff0c;现在在做项目时当你点击入住时间时会悬浮出一对并列的日历然后点击左边的日历就能选择入住时间点击右侧的日历就能自动得到离店时间当时没有太留意是怎么实现的现在在做项目时需要这样的日期选择功能又到了那个网站查看了源代码发现好像是用js和div做出来的在网上找了很多博客希望得到这样的代码但是都不尽如人意由于我一点都不会js这个模块又很重要所以干脆自己做一个用户自定义控件吧功能是实现了但是美感和代码质量是一定比不上在客户端做了如果有路过的朋友知道用js和div做我如下的效果请一定给小女我留言给我指点下迷津。 第一步制作自定义用户控件datecontrol.ascx为了实现部分页面刷新使用了vs2008中的Ajax控件组在页面拖放scriptmanagerproxy及updatepanel控件在updatepanel中放入一个label1、一个textbox1、一个button1给button的text之中加入一个向下的箭头可以从word文档中粘贴一个特殊符号▼当然如果你有合适的ico也可以拖放一个p_w_picpathbutton修饰的更漂亮一些然后在这三个并排的控件后加一个br另起一行加入一个标准的calendar1web控件实现效果是当点击button1时才出现calendar1textbox1的值就是选择的日期label1提供了一个只写属性给这个日历控件定义使用说明如label1.value“入店时间或开始时间等。我们来看一下客户端源代码: 1% Control LanguageC# AutoEventWireuptrue CodeFiledatecontrol.ascx.cs Inheritsdatecontrol % 2 asp:ScriptManagerProxy IDScriptManagerProxy1 runatserver 3/asp:ScriptManagerProxy 4 asp:UpdatePanel IDUpdatePanel1 runatserver 5 ContentTemplate 6 asp:Label IDLabel1 runatserver/asp:Label 7 asp:TextBox IDTextBox1 runatserver ValidationGroupa/asp:TextBox 8 asp:Button IDButton1 runatserver Font-SizeXX-Small 9 ForeColor#006600 Height22px οnclickButton1_Click Text▼ 10 Width19px /br 11 asp:Calendar IDCalendar1 runatserver BackColorWhite 12 BorderColor#3366CC BorderWidth1px CellPadding1 13 DayNameFormatShortest Font-NamesVerdana Font-Size8pt 14 ForeColor#003399 Height82px 15 onselectionchangedCalendar1_SelectionChanged Width297px 16 VisibleFalse 17 SelectedDayStyle BackColor#009999 Font-BoldTrue ForeColor#CCFF99 / 18 SelectorStyle BackColor#99CCCC ForeColor#336666 / 19 WeekendDayStyle BackColor#CCCCFF / 20 TodayDayStyle BackColor#99CCCC ForeColorWhite / 21 OtherMonthDayStyle ForeColor#999999 / 22 NextPrevStyle Font-Size8pt ForeColor#CCCCFF / 23 DayHeaderStyle BackColor#99CCCC ForeColor#336666 Height1px / 24 TitleStyle BackColor#003399 BorderColor#3366CC BorderWidth1px 25 Font-BoldTrue Font-Size10pt ForeColor#CCCCFF Height25px / 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的代码在这里谢谢这位仁兄下面我们来看一下客户端源代码。 1asp:Content IDContent1 ContentPlaceHolderIDhead RunatServer 2 style typetext/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 18asp:Content IDContent2 ContentPlaceHolderIDContentPlaceHolder1 RunatServer 19script languagejavascript 20function getDate() 21{ 22 var d,s,t; 23 dnew Date(); 24 sd.getFullYear().toString(10)-; 25 td.getMonth()1; 26 s(t9?:0)t-; 27 td.getDate(); 28 s(t9?:0)t ; 29// td.getHours(); 30// s(t9?:0)t:; 31// td.getMinutes(); 32// s(t9?:0)t:; 33// td.getSeconds(); 34// s(t9?:0)t; 35 return s; 36} 37function bj() 38{ 39if(document .getElementById (ctl00$ContentPlaceHolder1$date1$TextBox1).value) 40{ 41var begingetDate (); 42} 43else 44{ 45var begindocument.getElementById (ctl00$ContentPlaceHolder1$date1$TextBox1).value; 46} 47if(document .getElementById (ctl00$ContentPlaceHolder1$date2$TextBox1).value) 48{ 49var endgetDate (); 50} 51else 52{ 53var end document.getElementById (ctl00$ContentPlaceHolder1$date2$TextBox1).value; 54} 55if(beginend) 56{ 57alert (开始时间大于结束时间); 58return false ; 59} 60else 61{ 62return true ; 63} 64 65} 66 67/script 68 table classstyle1 69 tr 70 td stylefont-weight: bold; font-size: x-large; color: #800000 colspan2 71 asp:ScriptManager IDScriptManager1 runatserver 72 /asp:ScriptManager 73 按创建时间查找市场 74 asp:ImageButton IDImageButton1 runatserver Height26px 75 ImageUrl~/ICO/kaishi.gif OnClientClickreturn bj(); Width79px / 76 /td 77 /tr 78 tr 79 td stylefont-weight: bold; font-size:large; color: #800000 alignleft 80 valigntop 81 uc1:date IDdate1 runatserver LableText开始时间 / 82 /td 83 td stylefont-weight: bold; font-size:large; color: #800000 alignleft 84 valigntop 85 uc1:date IDdate2 runatserver LableText结束时间 / 86 /td 87 /tr 88 tr 89 td stylefont-weight: bold; font-size:large; color: #800000 alignleft 90 colspan2 91 asp:Label IDLabel1 runatserver/asp:Label 92 asp:SqlDataSource IDSqlDataSource6 runatserver/asp:SqlDataSource 93 /td 94 /tr 95 tr 96 td classstyle4 alignleft colspan2 97 asp:GridView IDGridView7 runatserver AutoGenerateColumnsFalse 98 BackColorWhite BorderColor#999999 BorderStyleSolid BorderWidth1px 99 CellPadding3 ForeColorBlack GridLinesVertical Width107% 100 onrowcommandGridView7_RowCommand DataKeyNamesid 101 FooterStyle BackColor#CCCCCC / 102 Columns 103 asp:BoundField DataFieldmarketname HeaderText市场名称 / 104 asp:BoundField DataFieldmarketpass HeaderText市场密码 / 105 asp:BoundField DataFieldmarketyear HeaderText市场年份 / 106 asp:BoundField DataFieldgroupnum HeaderText市场组数 / 107 asp:BoundField DataFieldcsxj HeaderText初始现金 / 108 asp:BoundField DataFieldmarketdate HeaderText市场创建时间 / 109 asp:BoundField DataFieldmarketbz HeaderText市场描述 / 110 asp:BoundField DataFieldmarketover HeaderText市场完成情况 / 111 asp:TemplateField HeaderText查看市场详情 112 ItemTemplate 113 asp:LinkButton IDLinkButton1 runatserver CommandArgument%#Eval(id) % 114 CommandNamecksj查看本市场企业数据/asp:LinkButton 115 /ItemTemplate 116 /asp:TemplateField 117 /Columns 118 PagerStyle BackColor#999999 ForeColorBlack HorizontalAlignCenter / 119 SelectedRowStyle BackColor#000099 Font-BoldTrue ForeColorWhite / 120 HeaderStyle BackColorBlack Font-BoldTrue ForeColorWhite / 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
