不使用梅花雨日历控件而使用ASP.NET日历控件实现同样效果
2010-04-29 11:07
851 查看
之前一直都是在使用梅花雨日历控件,没用过ASP.NET的日历控件,还不知道ASP.NET的日历控件的强大。下面的代码就是实现了一个很常见的功能:当点击TextBox旁边的img控件后,弹出一个日历控件,选择日期后点击Button按钮进行提交,并在页面底部的Label中显示用户选择的日期。
ASP.NET日历控件
ASP.NET日历控件
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void calEventDate_SelectionChanged(object sender, EventArgs e) { txtEventDate.Text = calEventDate.SelectedDate.ToString("d"); } protected void btnSubmit_Click(object sender, EventArgs e) { lblResult.Text = "You picked: " + txtEventDate.Text; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <script type="text/javascript"> function displayCalendar() { var datePicker = document.getElementById('datePicker'); datePicker.style.display = 'block'; } </script> <style type="text/css"> #datePicker { display:none; position:absolute; border:solid 2px black; background-color:white; } .content { width:400px; background-color:white; margin:auto; padding:10px; } html { background-color:silver; } </style> <title>Calendar with JavaScript</title> </head> <body> <form id="form1" runat="server"> <div class="content"> <asp:Label id="lblEventDate" Text="Event Date:" AssociatedControlID="txtEventDate" Runat="server" /> <asp:TextBox id="txtEventDate" Runat="server" /> <img src="Source/Calendar.gif" onclick="displayCalendar()" /> <div id="datePicker"> <asp:Calendar id="calEventDate" OnSelectionChanged="calEventDate_SelectionChanged" Runat="server" /> </div> <br /> <asp:Button id="btnSubmit" Text="Submit" Runat="server" OnClick="btnSubmit_Click" /> <hr /> <asp:Label id="lblResult" Runat="server" /> </div> </form> </body> </html>
相关文章推荐
- 利用asp.net日历服务器控件实现仿Yupoo日历相册的效果
- Asp.net 中使用GridView控件实现Checkbox单选
- ASP.NET 实现简单的注册界面(使用asp控件)
- 初学:asp.net日历控件的使用
- Asp.net的GridView控件实现单元格可编辑方便用户使用
- 【转】 使用ASP.NET AJAX实现幻灯片效果
- [翻译]使用ASP.NET AJAX实现幻灯片效果
- 使用ASP.NET Atlas实现拖放(Drag & Drop)效果
- 使用ASP.NET AJAX Control Toolkit中的ReorderList控件实现用鼠标拖动改变条目顺序
- asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序
- JSP GridView --使用自定义标签实现ASP.NET的控件
- 使用ASP.NET AJAX实现幻灯片效果
- ASP.NET MVC 3.0(十九): MVC 3.0 实例之使用开源控件实现表格排序和分页
- Asp.net使用JQuery实现评论的无刷新分页及分段延迟加载效果
- asp.net下Repeater使用 AspNetPager分页控件 不用存储过程 完美实现
- [翻译]使用ASP.NET AJAX实现幻灯片效果
- ASP.NET使用Linq to SQL实现基本的增、删、改、查及绑定控件
- ASP.NET Calendar日历(日期)控件使用方法
- 使用 ASP.NET Atlas PageNavigator控件实现客户端分页导航
- ASP.NET2.0中Tabs的简单实现 不用Asp.net Ajax ControlToolKit中的Tabs控件实现Tabs效果的简单实现方法: