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