不使用梅花雨日历控件而使用ASP.NET日历控件实现同样效果
之前一直都是在使用梅花雨日历控件，没用过ASP.NET的日历控件，还不知道ASP.NET的日历控件的强大。下面的代码就是实现了一个很常见的功能：当点击TextBox旁边的img控件后，弹出一个日历控件，选择日期后点击Button按钮进行提交，并在页面底部的Label中显示用户选择的日期。
ASP.NET日历控件
1 <%@ Page Language="C#" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <script runat="server">
4
5 protected void calEventDate_SelectionChanged(object sender, EventArgs e)
6 {
7 txtEventDate.Text = calEventDate.SelectedDate.ToString("d");
8 }
9
10 protected void btnSubmit_Click(object sender, EventArgs e)
11 {
12 lblResult.Text = "You picked: " + txtEventDate.Text;
13 }
14 </script>
15 <html xmlns="http://www.w3.org/1999/xhtml" >
16 <head id="Head1" runat="server">
17 <script type="text/javascript">
18
19 function displayCalendar()
20 {
21 var datePicker = document.getElementById('datePicker');
22 datePicker.style.display = 'block';
23 }
24
25 </script>
26 <style type="text/css">
27 #datePicker
28 {
29 display:none;
30 position:absolute;
31 border:solid 2px black;
32 background-color:white;
33 }
34 .content
35 {
36 width:400px;
37 background-color:white;
38 margin:auto;
39 padding:10px;
40 }
41 html
42 {
43 background-color:silver;
44 }
45 </style>
46 <title>Calendar with JavaScript</title>
47 </head>
48 <body>
49 <form id="form1" runat="server">
50 <div class="content">
51
52 <asp:Label
53 id="lblEventDate"
54 Text="Event Date:"
55 AssociatedControlID="txtEventDate"
56 Runat="server" />
57 <asp:TextBox
58 id="txtEventDate"
59 Runat="server" />
60 <img src="Source/Calendar.gif" onclick="displayCalendar()" />
61 <div id="datePicker">
62 <asp:Calendar
63 id="calEventDate"
64 OnSelectionChanged="calEventDate_SelectionChanged"
65 Runat="server" />
66 </div>
67
68 <br />
69 <asp:Button
70 id="btnSubmit"
71 Text="Submit"
72 Runat="server" OnClick="btnSubmit_Click" />
73
74 <hr />
75
76 <asp:Label
77 id="lblResult"
78 Runat="server" />
79
80 </div>
81 </form>
82 </body>
83 </html>
84
