创建弹出式日期选择器

在点击日历图标前，Calendar控件是隐藏的。#datePicker样式表规则把display属性设成了none。点击日历图标时，就会执行JavaScript函数displayCalendar()并把CSS的display属性设成block。

当在日历中选中一个日期时，页面回传到服务器端，并且引发服务器端事件SelectionChanged，更新TextBox控件。

CalendarJS 
 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalendarJS.aspx.cs" Inherits="Chapter4_CalendarJS" %>
 2 
 3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5  <html xmlns="http://www.w3.org/1999/xhtml">
 6  <head runat="server">
 7     <title>CalendarJS</title>
 8     <script type="text/javascript">
 9         function displayCalendar()
10         {
11             var datePicker = document.getElementById('datePicker');
12             datePicker.style.display='block';
13         }
14     </script>
15     <style type="text/css">
16         #datePicker
17         {
18              display:none;
19              position:absolute;
20              border:solid 2px black;
21              background-color:White;
22              margin:0px;
23              text-align:center;
24         }
25         .content
26         {
27             width:400px;
28             background-color:White;
29             margin:auto;
30             padding:10px;
31         }
32         html
33         {
34             background-color:Silver;
35         }
36     </style>
37 </head>
38 <body>
39     <form id="form1" runat="server">
40     <div class="content">
41         <asp:Label ID="lblEventDate" runat="server" Text="Event Date:" AssociatedControlID="txtEventDate"></asp:Label>
42         
43         <asp:TextBox ID="txtEventDate" runat="server" Width="128px"></asp:TextBox>
44         <img alt="日历" src="img/calendar.jpg" style="width: 20px; height: 20px" onclick="displayCalendar()" />
45     
46          <div id="datePicker">
47         <asp:Calendar ID="calEventDate" runat="server"    onselectionchanged="calEventDate_SelectionChanged"></asp:Calendar>
48     </div>
49 
50     <br />
51 
52     <asp:Button ID="btnSubmit" runat="server" Text="Submit" 
53         onclick="btnSubmit_Click" />
54     
55     <hr />
56 
57     <asp:Label ID="lblResult" runat="server"></asp:Label>
58     </div>
59     </form>
60 </body>
61 </html>
62

运行效果如下：

posted on 2010-12-13 15:50  DilibraLee  阅读(313)  评论(0)    收藏  举报

导航