不使用梅花雨日历控件而使用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

 

转载于:https://www.cnblogs.com/luzx/archive/2010/04/29/1723622.html