1<html>
2<head>
3<title>MonthView Demo</title>
4<script language="javascript">
5/*********************************** 程序功能：日期选择
6特点 ：Javascript+HTML仿造VB里的MonthView控件
7作者 ：ken
8联系 ：[email protected]
9开发日期：2002-8-5
10\\***********************************/
11
12var languageName="cn" //内容显示的语言 value:"cn" "en"
13var currentMonth,currentYear
14var nowDate,nowMonth,nowYear
15
16d=new Date();
17nowDate=d.getDate()
18nowMonth=d.getMonth()
19nowYear=d.getYear()
20
21currentMonth=nowMonth
22currentYear=nowYear
23
24arrWeekCaption_cn = new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
25arrWeekCaption_en = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")
26arrMonthCaption_cn= new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月")
27arrMonthCaption_en= new Array("January","February","March","April","May","June","July","August","September","October","November","December")
28
29function MonthView(){}
30
31/******************************* 初始化控件
32\\*******************************/
33function MonthView.initialize(){
34
35
36output ='<table cellpadding=0 cellspacing=2 style="border: 1 solid black;width:300;cursor:default" id="tblMonthView" onselectstart="return false">'
37output+=' <tr>'
38output+=' <td>'
39output+=' <table width="100%" cellpadding=0 cellspacing=0>'
40output+=' <tr style="padding-top:10;padding-bottom:10;background:menu;" id="trCaption">'
41output+=' <td><input type="button"value="3" style="height:22;font-family:webdings" onclick="MonthView.showCurrentDate(\'preview\')"></td>'
42output+=' <td align="center"><span id="spanCurrentMonth" style="font-size:12;"></span><span style="padding-left:10;font-size:12" id="spanCurrentYear"></span></td>'
43output+=' <td align="right"><input type="button"value="4" style="height:22;font-family:webdings" onclick="MonthView.showCurrentDate(\'next\')"></td>'
44output+=' </tr>'
45output+=' </table>'
46output+=' </td>'
47output+=' </tr>'
48output+=' <tr>'
49output+=' <td>'
50output+=' <table width="100%" cellpadding=0 cellspacing=2 id="tblShowDay" style="font-size:12">'
51output+=' <tr align="center"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
52output+=' <tr><td colspan=7 height="1" style="background:black" id="tdLine"></td></tr>'
53output+=' <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>'
54output+=' </table>'
55output+=' </td>'
56output+=' </tr>'
57output+=' <tr>'
58output+=' <td>'
59output+=' <table width="100%" cellpadding=0 cellspacing=2 id="tblToday" style="font-size:12">'
60output+=' <tr><td width="20"></td><td></td></tr>'
61output+=' </table>'
62output+=' </td>'
63output+=' </tr>'
64output+='</table>'
65
66document.write (output)
67
68
69//*********当前年、月的显示*********
70
71MonthView.setCurrentCaption()
72
73//*********************************
74//*********星期表头的显示*********
75
76MonthView.setWeekCaption()
77
78//*********************************
79
80//*********设置每月的日期*********
81
82MonthView.bulidDay()
83
84//*****************************
85
86//*********显示隐藏今日日期*********
87
88MonthView.setShowHideToday(true)
89
90//*****************************
91}
92
93function MonthView.setCurrentCaption(){
94spanCurrentYear.innerHTML=currentYear
95if (languageName=="cn"){
96spanCurrentMonth.innerHTML=arrMonthCaption_cn[currentMonth]
97}else{
98spanCurrentMonth.innerHTML=arrMonthCaption_en[currentMonth]
99}
100}
101function MonthView.setWeekCaption(){
102
103if (languageName=="cn"){
104arrCaption=arrWeekCaption_cn
105}else{
106arrCaption=arrWeekCaption_en
107}
108
109for (var i=0; i<arrCaption.length; i++){
110tblShowDay.rows[0].cells[i].innerHTML=arrCaption[i]
111}
112}
113function MonthView.bulidDay(){
114
115arrMonthCount=new Array(31,28,31,30,31,30,31,31,30,31,30,31)
116if ((currentYear % 400 ==0) || ((currentYear % 100==0)&&(currentYear % 4==0))){
117arrMonthCount[1]=29
118}
119
120rowDay=2
121
122while (tblShowDay.rows.length>rowDay){
123tblShowDay.deleteRow(rowDay)
124}
125
126firstDay=new Date(currentYear,currentMonth,1)
127tempRow=tblShowDay.insertRow()
128
129//*********填充当月1号以前的日期*********
130for (var j=0 ;j<firstDay.getDay();j++){
131tempCell=tempRow.insertCell()
132}
133//*************************************
134for (var i=1 ;i<=arrMonthCount[currentMonth]; i++){
135
136tempCell=tempRow.insertCell()
137tempCell.style.textAlign="center"
138tempCell.innerHTML=i
139tempCell.onclick=MonthView.action
140if ((i+firstDay.getDay()) %7 == 0 && i!=arrMonthCount[currentMonth]){tempRow=tblShowDay.insertRow()}
141}
142}
143
144function MonthView.showCurrentDate(direction){
145if (direction=="preview"){
146currentMonth--
147if (currentMonth<0) {currentMonth=11 ;currentYear--}
148}
149if (direction=="next"){
150currentMonth++
151if (currentMonth>11) {currentMonth=0 ;currentYear++}
152}
153
154MonthView.setCurrentCaption()
155MonthView.bulidDay()
156}
157function MonthView.setLanguage(itsName){
158languageName=itsName
159MonthView.setCurrentCaption()
160MonthView.setWeekCaption()
161MonthView.setShowHideToday(true)
162}
163function MonthView.setCaptionBg(itsColor){
164trCaption.style.background=itsColor
165}
166function MonthView.setBorder(itsBorder){
167tblMonthView.style.border=itsBorder
168}
169function MonthView.setLineColor(itsColor){
170tdLine.style.background=itsColor
171}
172function MonthView.setShowHideToday(flag){
173el=tblToday.rows[0].cells[1]
174if (flag){
175if (languageName=="cn"){
176el.innerHTML="今日："+nowYear+"-"+(nowMonth+1)+"-"+nowDate
177}else{
178el.innerHTML="Today:"+nowYear+"-"+(nowMonth+1)+"-"+nowDate
179}
180
181el.style.display="block"
182}else{
183el.style.display="none"
184}
185}
186function MonthView.action(){
187//*********请修改此函数*********
188MonthView_value=currentYear+"-"+(currentMonth+1)+"-"+this.innerHTML
189alert(MonthView_value)
190
191}
192</script>
193</head>
194<body>
195<div>
196<script language="javascript">
197MonthView.initialize()
198</script>
199</div>
200<br/><br/>
201<table border="1" style="font-size:12;width:95%">
202<tr>
203<td>方法</td><td>描述</td><td>演示</td>
204</tr>
205<tr>
206<td>MonthView.initialize()</td>
207<td>初始化控件</td>
208<td><image height="1" src="none.gif" width="1"/></td>
209</tr>
210<tr>
211<td>MonthView.setLanguage(<i>par</i>)<br/>参数："cn" "en"</td>
212<td>设置控件显示语言</td>
213<td>
214<input onclick="MonthView.setLanguage('cn')" type="button" value="中文"/>
215<input onclick="MonthView.setLanguage('en')" type="button" value="英文"/>
216</td>
217</tr>
218<tr>
219<td>MonthView.setBorder(<i>par</i>)<br/>参数："边框宽度(int) 边框形状(solid|dot...) 边框颜色"</td>
220<td>边框设置</td>
221<td>
222<input onclick="MonthView.setBorder('2 solid darkred')" type="button" value="ChangeBorder"/>
223</td>
224</tr>
225<tr>
226<td>MonthView.setCaptionBg(<i>par</i>)<br/>参数：十六进制颜色代码</td>
227<td>设置当前年、月的背景色</td>
228<td>
229<input onclick="MonthView.setCaptionBg('INFOBACKGROUND')" type="button" value="INFOBACKGROUND"/>
230</td>
231</tr>
232<tr>
233<td>MonthView.setLineColor(<i>par</i>)<br/>参数：十六进制颜色代码</td>
234<td>设置分割线的颜色</td>
235<td>
236<input onclick="MonthView.setLineColor('darkred')" type="button" value="Darkred"/>
237</td>
238</tr>
239<tr>
240<td>MonthView.setShowHideToday(<i>par</i>)<br/>参数：true|false</td>
241<td>显示／隐藏今日日期</td>
242<td>
243<input onclick="MonthView.setShowHideToday(false)" type="button" value="Hide"/>
244<input onclick="MonthView.setShowHideToday(true)" type="button" value="Show"/>
245</td>
246</tr>
247</table>
248</body>
249</html>
Javascript+HTML仿造VB里的MonthView控件
comments powered by Disqus