1
<html>
2
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
6<meta name="ProgId" content="FrontPage.Editor.Document">
7<title>New Page 1</title>
8<script language=javascript>
9var DS_x,DS_y;
10
11function dateSelector() //构造dateSelector对象，用来实现一个日历形式的日期输入框。
12
{
13
var myDate=new Date();
14
15this.year=myDate.getFullYear(); //定义year属性，年份，默认值为当前系统年份。
16this.month=myDate.getMonth()+1; //定义month属性，月份，默认值为当前系统月份。
17this.date=myDate.getDate(); //定义date属性，日，默认值为当前系统的日。
18this.inputName=\'\'; //定义inputName属性，即输入框的name，默认值为空。注意：在同一页中出现多个日期输入框，不能有重复的name！
19this.display=display; //定义display方法，用来显示日期输入框。
20
}
21
22function display() //定义dateSelector的display方法，它将实现一个日历形式的日期选择框。
23{
24var week=new Array(\'日\',\'一\',\'二\',\'三\',\'四\',\'五\',\'六\');
25
26document.write("<style type=text/css>");
27document.write(" .ds_font td,span { font: normal 12px 宋体; color: #000000; }");
28document.write(" .ds_border { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
29document.write(" .ds_border2 { border: 1px solid #000000; cursor: hand; background-color: #DDDDDD }");
30document.write("</style>");
31
32var M=new String(this.month);
33var d=new String(this.date);
34
35
if(M.length==1&d.length==1){
36
document.write("<input style=\'text-align:center;\' id=\'DS_"+this.inputName+"\' name=\'"+this.inputName+"\' value=\'"+this.year+"-0"+this.month+"-0"+this.date+"\' title=双击可进行编缉 ondblclick=\'this.readOnly=false;this.focus()\' onblur=\'this.readOnly=true\' readonly>");}
37else if(M.length==1&d.length==2){
38document.write("<input style=\'text-align:center;\' id=\'DS_"+this.inputName+"\' name=\'"+this.inputName+"\' value=\'"+this.year+"-0"+this.month+"-"+this.date+"\' title=双击可进行编缉 ondblclick=\'this.readOnly=false;this.focus()\' onblur=\'this.readOnly=true\' readonly>");}
39else if(M.length==2&d.length==1){
40document.write("<input style=\'text-align:center;\' id=\'DS_"+this.inputName+"\' name=\'"+this.inputName+"\' value=\'"+this.year+"-"+this.month+"-0"+this.date+"\' title=双击可进行编缉 ondblclick=\'this.readOnly=false;this.focus()\' onblur=\'this.readOnly=true\' readonly>");}
41else if(M.length==2&d.length==2){
42document.write("<input style=\'text-align:center;\' id=\'DS_"+this.inputName+"\' name=\'"+this.inputName+"\' value=\'"+this.year+"-"+this.month+"-"+this.date+"\' title=双击可进行编缉 ondblclick=\'this.readOnly=false;this.focus()\' onblur=\'this.readOnly=true\' readonly>");}
43
44document.write("<button style=\'width:60px;height:18px;font-size:12px;margin:1px;border:1px solid #A4B3C8;background-color:#DFE7EF;\' type=button onclick=this.nextSibling.style.display=\'block\' onfocus=this.blur()>选择日期</button>");
45
46document.write("<div style=\'position:absolute;display:none;text-align:center;width:0px;height:0px;overflow:visible\' onselectstart=\'return false;\'>");
47document.write(" <div style=\'position:absolute;left:-60px;top:20px;width:142px;height:165px;background-color:#F6F6F6;border:1px solid #245B7D;\' class=ds_font>");
48document.write(" <table cellpadding=0 cellspacing=1 width=140 height=20 bgcolor=#CEDAE7 onmousedown=\'DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();\' onmouseup=\'releaseCapture();\' onmousemove=\'dsMove(this.parentNode)\' style=\'cursor:move;\'>");
49document.write(" <tr align=center>");
50document.write(" <td width=12% onmouseover=this.className=\'ds_border\' onmouseout=this.className=\'\' onclick=subYear(this) title=\'减小年份\'><<</td>");
51document.write(" <td width=12% onmouseover=this.className=\'ds_border\' onmouseout=this.className=\'\' onclick=subMonth(this) title=\'减小月份\'><</td>");
52document.write(" <td width=52%><b>"+this.year+"</b><b>年</b><b>"+this.month+"</b><b>月</b></td>");
53document.write(" <td width=12% onmouseover=this.className=\'ds_border\' onmouseout=this.className=\'\' onclick=addMonth(this) title=\'增加月份\'>></td>");
54document.write(" <td width=12% onmouseover=this.className=\'ds_border\' onmouseout=this.className=\'\' onclick=addYear(this) title=\'增加年份\'>>></td>");
55document.write(" </tr>");
56document.write(" </table>");
57
58document.write(" <table cellpadding=0 cellspacing=0 width=140 height=20 onmousedown=\'DS_x=event.x-parentNode.style.pixelLeft;DS_y=event.y-parentNode.style.pixelTop;setCapture();\' onmouseup=\'releaseCapture();\' onmousemove=\'dsMove(this.parentNode)\' style=\'cursor:move;\'>");
59document.write(" <tr align=center>");
60for(i=0;i<7;i++)
61 document.write(" <td>"+week[i]+"</td>");
62document.write(" </tr>");
63document.write(" </table>");
64
65document.write(" <table cellpadding=0 cellspacing=2 width=140 bgcolor=#EEEEEE>");
66for(i=0;i<6;i++)
67{
68document.write(" <tr align=center>");
69 for(j=0;j<7;j++)
70document.write(" <td width=10% height=16 onmouseover=if(this.innerText!=\'\'&&this.className!=\'ds_border2\')this.className=\'ds_border\' onmouseout=if(this.className!=\'ds_border2\')this.className=\'\' onclick=getValue(this,document.all(\'DS_"+this.inputName+"\'))></td>");
71document.write(" </tr>");
72}
73document.write(" </table>");
74
75document.write(" <span style=cursor:hand onclick=this.parentNode.parentNode.style.display=\'none\'>【关闭】</span>");
76document.write(" </div>");
77document.write("</div>");
78
79dateShow(document.all("DS_"+this.inputName).nextSibling.nextSibling.childNodes[0].childNodes[2],this.year,this.month)
80}
81
82function subYear(obj) //减小年份
83{
84var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
85myObj[0].innerHTML=eval(myObj[0].innerHTML)-1;
86dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
87}
88
89function addYear(obj) //增加年份
90{
91var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
92myObj[0].innerHTML=eval(myObj[0].innerHTML)+1;
93dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
94}
95
96function subMonth(obj) //减小月份
97{
98var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
99var month=eval(myObj[2].innerHTML)-1;
100if(month==0)
101{
102month=12;
103subYear(obj);
104}
105myObj[2].innerHTML=month;
106dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
107}
108
109function addMonth(obj) //增加月份
110{
111var myObj=obj.parentNode.parentNode.parentNode.cells[2].childNodes;
112var month=eval(myObj[2].innerHTML)+1;
113if(month==13)
114{
115month=1;
116addYear(obj);
117}
118myObj[2].innerHTML=month;
119dateShow(obj.parentNode.parentNode.parentNode.nextSibling.nextSibling,eval(myObj[0].innerHTML),eval(myObj[2].innerHTML))
120}
121
122function dateShow(obj,year,month) //显示各月份的日
123{
124var myDate=new Date(year,month-1,1);
125var today=new Date();
126var day=myDate.getDay();
127var selectDate=obj.parentNode.parentNode.previousSibling.previousSibling.value.split(\'-\');
128var length;
129switch(month)
130{
131case 1:
132case 3:
133case 5:
134case 7:
135case 8:
136case 10:
137case 12:
138length=31;
139break;
140case 4:
141case 6:
142case 9:
143case 11:
144length=30;
145break;
146case 2:
147if((year%4==0)&&(year%100!=0)||(year%400==0))
148length=29;
149else
150length=28;
151}
152for(i=0;i<obj.cells.length;i++)
153{
154obj.cells[i].innerHTML=\'\';
155obj.cells[i].style.color=\'\';
156obj.cells[i].className=\'\';
157}
158for(i=0;i<length;i++)
159{
160obj.cells[i+day].innerHTML=(i+1);
161if(year==today.getFullYear()&&(month-1)==today.getMonth()&&(i+1)==today.getDate())
162obj.cells[i+day].style.color=\'red\';
163if(year==eval(selectDate[0])&month==eval(selectDate[1])&&(i+1)==eval(selectDate[2]))
164obj.cells[i+day].className=\'ds_border2\';
165}
166}
167
168function getValue(obj,inputObj) //把选择的日期传给输入框
169{
170var myObj=inputObj.nextSibling.nextSibling.childNodes[0].childNodes[0].cells[2].childNodes;
171if(obj.innerHTML)
172if(obj.innerHTML.length==1&&myObj[2].innerHTML.length==1)
173inputObj.value=myObj[0].innerHTML+"-0"+myObj[2].innerHTML+"-0"+obj.innerHTML;
174 else if(obj.innerHTML.length==1&&myObj[2].innerHTML.length==2)
175inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-0"+obj.innerHTML;
176 else if(obj.innerHTML.length==2&&myObj[2].innerHTML.length==1)
177inputObj.value=myObj[0].innerHTML+"-0"+myObj[2].innerHTML+"-"+obj.innerHTML;
178 else if(obj.innerHTML.length==2&&myObj[2].innerHTML.length==2)
179inputObj.value=myObj[0].innerHTML+"-"+myObj[2].innerHTML+"-"+obj.innerHTML;
180inputObj.nextSibling.nextSibling.style.display=\'none\';
181for(i=0;i<obj.parentNode.parentNode.parentNode.cells.length;i++)
182obj.parentNode.parentNode.parentNode.cells[i].className=\'\';
183obj.className=\'ds_border2\'
184}
185
186function dsMove(obj) //实现层的拖移
187{
188if(event.button==1)
189{
190var X=obj.clientLeft;
191var Y=obj.clientTop;
192obj.style.pixelLeft=X+(event.x-DS_x);
193obj.style.pixelTop=Y+(event.y-DS_y);
194}
195}
196</script>
197</head>
198
199<body>
200从
201<script language=javascript>
202var myDate=new dateSelector();
203myDate.year--;
204
205myDate.inputName=\'start_date\'; //注意这里设置输入框的name，同一页中日期输入框，不能出现重复的name。
206myDate.display();
207</script>
208到
209<script language=javascript>
210myDate.year++;
211myDate.inputName=\'end_date\'; //注意这里设置输入框的name，同一页中的日期输入框，不能出现重复的name。
212myDate.display();
213</script>
214
215</body>
216
217</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217