Js日历

此文章来自网络
JS文件（保存为calendar.js）

var SelectDateObj;
2

function getobjectx(e){
3

var l=e.offsetLeft;
4

while(e=e.offsetParent){
5

l+=e.offsetLeft;
6

}
7

return l;
8

}
10

function getobjecty(e){
12

var t=e.offsetTop;
13

while(e=e.offsetParent){
14

t+=e.offsetTop;
15

}
16

return t;
17

}
18

function hidedate()
20

{
21

if(document.all.SelectDateList.style.display=='block')
23

document.all.SelectDateList.style.display='none';
24

}
26

function showdate(txtid)
27

{
28

SelectDateObj=eval("document.all."+txtid);
29

if(document.all.SelectDateList.style.display=='block')
30

document.all.SelectDateList.style.display='none';
31

else
32

{
33

TableFunction().JumpToRun("start");
35

//posX = event.clientX ;
36

//posY = event.clientY ;
37

var x,y;
38

x=getobjectx(SelectDateObj) ;
39

y=getobjecty(SelectDateObj) ;
40

document.all.SelectDateList.style.left = x+SelectDateObj.offsetWidth;
42

document.all.SelectDateList.style.top = y+SelectDateObj.offsetHeight;
43

document.all.SelectDateList.style.display='block';
44

}
45

}
46

function TableFunction()
47

{
48

this.GetDateStr=function(y,m)
49

{
50

this.DayArray=[];
51

for(var i=0;i<42;i++)this.DayArray[i]=" ";
52

for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;
53

return this.DayArray;
54

}
55

this.GetTableStr=function(y,m)
56

{
57

this.DateArray=["日","一","二","三","四","五","六"];
58

this.DStr="<div id=SelectDateList name=SelectDateList style='display:none;position:absolute;'>"
59

this.DStr=this.DStr+"<table oncontextmenu='return false' onselectstart='return false' style='width:160;cursor:default;border:1 solid #9c9c9c;border-right:0;border-bottom:0;filter:progid:dximagetransform.microsoft.dropshadow(color=#e3e3e3,offx=3,offy=3,positive=true)' border='0' cellpadding='0' cellspacing='0'>\n"+
60

"<tr><td colspan='7' class='TrOut'>"+
61

"<table width='100%' height='100%'border='0' cellpadding='0' cellspacing='0'><tr align='center'>\n"+
62

"<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"b\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>3</td>\n"+
63

"<td id='YearTD' width='70' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"y\",false)'>"+y+" 年</td>\n"+
64

"<td id='MonthTD' width='47' onmouseover='this.style.background=\"#cccccc\"' onmouseout='this.style.background=\"\"' onclick='TableFunction().WriteSelect(this,this.innerText.split(\" \")[0],\"m\",false)'>"+m+" 月</td>\n"+
65

"<td width='20' style='font-family:\"webdings\";font-size:9pt' onclick='TableFunction().JumpToRun(\"n\")' onmouseover='this.style.color=\"#ff9900\"' onmouseout='this.style.color=\"\"'>4</td></tr></table>\n"+
66

"</td></tr>\n"+
67

"<tr align='center'>\n";
68

for(var i=0;i<7;i++)
69

this.DStr+="<td class='TrOut'>"+DateArray[i]+"</td>\n";
70

this.DStr+="</tr>\n";
71

for(var i=0;i<6;i++)
72

{
73

this.DStr+="<tr align='center'>\n";
74

for(var j=0;j<7;j++)
75

{
76

var CS=new Date().getDate()==this.GetDateStr(y,m)[i*7+j]?"TdOver":"TdOut";
77

this.DStr+="<td id='TD' class='"+CS+"' cs='"+CS+"' onmouseover='this.className=\"TdOver\"' onmouseout='if(this.cs!=\"TdOver\")this.className=\"TdOut\"' onclick='TableFunction().AlertDay()'>"+this.GetDateStr(y,m)[i*7+j]+" </td>\n";
78

}
79

this.DStr+="</tr>\n";
80

}
81

this.DStr+="</table></div>";
82

return this.DStr;
83

}
84

this.WriteSelect=function(obj,values,action,getobj)
86

{
87

if(values=="")return;
88

if(getobj)
89

{
90

obj.innerHTML=values+(action=="y"?" 年":" 月");
91

this.RewriteTableStr(YearTD.innerText.split(" ")[0],MonthTD.innerText.split(" ")[0]);
92

return false;
93

}
94

var StrArray=[];
95

if(action=="y")
96

{
97

for(var i=0;i<15;i++)
98

{
99

var year=values-7+i;
100

StrArray[i]="<option value='"+year+"' "+(values==year?"selected":"")+"> "+year+"年</option>\n";
101

}
102

obj.innerHTML="<select id='select1' style='width:67' onchange='TableFunction().WriteSelect(parentElement,this.value,\"y\",true)' onblur='YearTD.innerText=this.value+\" 年\"'>\n"+StrArray.join("")+"</select>";
103

select1.focus();
104

}
105

if(action=="m")
106

{
107

for(var i=1;i<13;i++)
108

StrArray[i]="<option value='"+i+"' "+(i==values?"selected":"")+"> "+i+"月</option>\n";
109

obj.innerHTML="<select id='select2' style='width:47' onchange='TableFunction().WriteSelect(parentElement,this.value,\"m\",true)' onblur='MonthTD.innerText=this.value+\" 月\"'>\n"+StrArray.join("")+"</select>";
110

select2.focus();
111

}
112

}
113

114

this.RewriteTableStr=function(y,m)
115

{
116

var TArray=this.GetDateStr(y,m);
117

var len=TArray.length;
118

for(var i=0;i<len;i++)
119

{
120

TD[i].innerHTML=TArray[i]+" ";
121

TD[i].className="TdOut";
122

TD[i].cs="TdOut";
123

if(new Date().getYear()==y&&new Date().getMonth()+1==m&&new Date().getDate()==TArray[i])
124

{
125

TD[i].className="TdOver";
126

TD[i].cs="TdOver";
127

}
128

}
129

}
130

131

this.JumpToRun=function(action)
132

{
133

var YearNO=YearTD.innerText.split(' ')[0];
134

var MonthNO=MonthTD.innerText.split(' ')[0];
135

if(action=="b")
136

{
137

if(MonthNO=="1")
138

{
139

MonthNO=13;
140

YearNO=YearNO-1;
141

}
142

MonthTD.innerText=MonthNO-1+" 月";
143

YearTD.innerText=YearNO+" 年";
144

this.RewriteTableStr(YearNO,MonthNO-1);
145

}
146

if(action=="n")
147

{
148

if(MonthNO=="12")
149

{
150

MonthNO=0;
151

YearNO=YearNO-(-1);
152

}
153

YearTD.innerText=YearNO+" 年";
154

MonthTD.innerText=MonthNO-(-1)+" 月";
155

this.RewriteTableStr(YearNO,MonthNO-(-1));
156

}
157

if(action=="start")
158

{
159

MonthNO=new Date().getMonth();
160

YearNO=new Date().getYear();
161

YearTD.innerText=YearNO+" 年";
162

MonthTD.innerText=MonthNO-(-1)+" 月";
163

this.RewriteTableStr(YearNO,MonthNO-(-1));
164

}
165

}
166

167

this.AlertDay=function()
168

{
169

if(event.srcElement.innerText!=" ")
170

SelectDateObj.innerText=YearTD.innerText.split(' ')[0]+"-"+MonthTD.innerText.split(' ')[0]+"-"+event.srcElement.innerText;
171

document.all.SelectDateList.style.display="none";
172

}
173

return this;
174

}
175

function selectfunction(timename,timevalue)
176

{
177

178

var timobj = eval("document.all."+timename)
179

with(timobj)
180

{
181

length = 24;
182

for(var i=0;i < 24;i++)
183

{
184

options[i].value=i;
185

options[i].text=i;
186

if (i == timevalue)
187

{
188

timobj.selectedIndex=timevalue;
189

}
190

}
191

}
192

}
193

document.write(TableFunction().GetTableStr(new Date().getYear(),new Date().getMonth()+1));

Css文件（calendar.css）//日期控件配置样式

.body,td{
2

font-family:"Arial";
3

font-size:9pt;
4

color:#000000;
5

}
6

.TrOut{
7

background:#dddddd;
8

height:26;
9

border:1 solid #999999;
10

border-top-color:#f4f4f4;
11

border-left-color:#f4f4f4;
12

}
13

.TdOver{
14

background:#eeeeee;
15

height:20;
16

border:1 solid #ffffff;
17

border-top-color:#9c9c9c;
18

border-left-color:#9c9c9c;
19

color:red;
20

}
21

.TdOut{
22

background:#eeeeee;
23

height:20;
24

border:1 solid #9c9c9c;
25

border-top-color:#ffffff;
26

border-left-color:#ffffff;
27

}
28

.input2
29

{
30

BORDER: #838383 1px solid;
31

BACKGROUND-COLOR: #dff0EE;
32

font-weight: normal;
33

line-height: 120%
34

}

html 页面上演示

<form action="moneydetail.asp" method="post" id="aaafrm1" name="frm1.asp">
4

<table width="700" border="0" cellpadding="0" cellspacing="0" valign="top">
5

<tr align="center">
6

<td colspan="15" >
7

开始： <input type="text" name="startdate" size="8" ID="Text3" >
9

<input type="button" name="show" value="选择" onClick="window.event.cancelBubble=true;showdate('startdate');"
10

class="button1" ID="Button3"> 截止： <input type="text" name="enddate" ID="Text4" size=8 >
11

<input type="button" name="show" value="选择" onClick="window.event.cancelBubble=true;showdate('enddate');"
12

class="button1" ID="Button4"> 
13

<input name="active" type="submit" class="button" value="时间查询" ID="Submit1">
14

</td>
15

</tr>
16

</table>
17

</form>

posted @ 2008-05-29 20:13 冷风醉饮阅读(600) 评论(0) 收藏举报

刷新页面返回顶部

boss504

Js日历

公告