天涯社区用到的日历函数-优快云博客

本文链接：https://blog.youkuaiyun.com/AppleBBS/article/details/377437

代码如下：
<Script language="javascript" src="http://www.tianyablog.com/includes/date.js"></Script> <form method="post" id=form1 name=form1> <input type="text" name="NextArticle" size=10 οnmοuseup=toggleDatePicker('daysOfMonth','form1.NextArticle') ID="NextArticle" style="cursor:pointer" readonly="true" title="单击选择日期"><IMG align=absMiddle alt='单击选择日期' style="cursor:pointer" border=0 height=19 id=daysOfMonthPos name=daysOfMonthPos οnmοuseup=toggleDatePicker('daysOfMonth','form1.NextArticle') src='http://www.tianyablog.com/images/calendar.gif' width=19><DIV id=daysOfMonth style='POSITION: absolute'></DIV> </form>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]

其中用到一个Date.js文件代码如下：

<!-- Hide
2

isIE = (document.all ? true : false );
3

function getIEPosX(elt) { return getIEPos(elt, " Left " ); }
5

function getIEPosY(elt) { return getIEPos(elt, " Top " ); }
6

function getIEPos(elt,which) {
7

iPos = 0
8

while (elt != null ) {
9

iPos += elt[ " offset " + which]
10

elt = elt.offsetParent
11

}
12

return iPos
13

}
14

function getXBrowserRef(eltname) {
16

return (isIE ? document.all[eltname].style : document.layers[eltname]);
17

}
18

function hideElement(eltname) { getXBrowserRef(eltname).visibility = 'hidden'; }
20

// 按不同的浏览器进行处理元件的位置
22

function moveBy(elt,deltaX,deltaY) {
23

if (isIE) {
24

elt.left = elt.pixelLeft + deltaX;
25

elt.top = elt.pixelTop + deltaY;
26

} else {
27

elt.left += deltaX;
28

elt.top += deltaY;
29

}
30

}
31

function toggleVisible(eltname) {
33

elt = getXBrowserRef(eltname);
34

if (elt.visibility == 'visible' || elt.visibility == 'show') {
35

elt.visibility = 'hidden';
36

} else {
37

fixPosition(eltname);
38

elt.visibility = 'visible';
39

}
40

}
41

function setPosition(elt,positionername,isPlacedUnder) {
43

positioner = null ;
44

if (isIE) {
45

positioner = document.all[positionername];
46

elt.left = getIEPosX(positioner);
47

elt.top = getIEPosY(positioner);
48

} else {
49

positioner = document.images[positionername];
50

elt.left = positioner.x;
51

elt.top = positioner.y;
52

}
53

if (isPlacedUnder) { moveBy(elt, 0 ,positioner.height); }
54

}
55

// ——————————————————————————————————————
59

// 判断浏览器
61

isIE = (document.all ? true : false );
62

// 初始月份及各月份天数数组
64

var months = new Array( " 一月 " , " 二月 " , " 三月 " , " 四月 " , " 五月 " , " 六月 " , " 七月 " ,
65

" 八月 " , " 九月 " , " 十月 " , " 十一月 " , " 十二月 " );
66

var daysInMonth = new Array( 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 ,
67

30 , 31 , 30 , 31 );
68

var displayMonth = new Date().getMonth();
69

var displayYear = new Date().getFullYear();
70

var displayDay = 0 ;
71

var displayDivName;
73

var displayElement;
74

function getDays(month, year) {
76

// 测试选择的年份是否是润年？
77

if ( 1 == month)
78

return (( 0 == year % 4 ) && ( 0 != (year % 100 ))) ||
79

( 0 == year % 400 ) ? 29 : 28 ;
80

else
81

return daysInMonth[month];
82

}
83

function getToday() {
85

// 得到今天的日期
86

this .now = new Date();
87

this .year = this .now.getFullYear();
88

this .month = this .now.getMonth();
89

this .day = this .now.getDate();
90

}
91

// 并显示今天这个月份的日历
93

today = new getToday();
94

function newCalendar(eltName,attachedElement) {
96

if (attachedElement) {
97

if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
98

displayElement = attachedElement;
99

}
100

displayDivName = eltName;
101

102

today = new getToday();
103

var parseYear = parseInt(displayYear + '');
104

var newCal = new Date(parseYear,displayMonth, 1 );
105

var day = - 1 ;
106

var startDayOfWeek = newCal.getDay();
107

if ((today.year == newCal.getFullYear()) &&
108

(today.month == newCal.getMonth()))
109

{
110

day = today.day;
111

}
112

var intDaysInMonth =
113

getDays(newCal.getMonth(), newCal.getFullYear());
114

var daysGrid = makeDaysGrid(startDayOfWeek,day,intDaysInMonth,newCal,eltName)
115

if (isIE) {
116

var elt = document.all[eltName];
117

elt.innerHTML = daysGrid;
118

} else {
119

var elt = document.layers[eltName].document;
120

elt.open();
121

elt.write(daysGrid);
122

elt.close();
123

}
124

}
125

126

function incMonth(delta,eltName) {
127

displayMonth += delta;
128

if (displayMonth >= 12 ) {
129

displayMonth = 0 ;
130

incYear( 1 ,eltName);
131

} else if (displayMonth <= - 1 ) {
132

displayMonth = 11 ;
133

incYear( - 1 ,eltName);
134

} else {
135

newCalendar(eltName);
136

}
137

}
138

139

function incYear(delta,eltName) {
140

displayYear = parseInt(displayYear + '') + delta;
141

newCalendar(eltName);
142

}
143

144

function makeDaysGrid(startDay,day,intDaysInMonth,newCal,eltName) {
145

var daysGrid;
146

var month = newCal.getMonth();
147

var year = newCal.getFullYear();
148

var isThisYear = (year == new Date().getFullYear());
149

var isThisMonth = (day > - 1 )
150

daysGrid = ' < table border = 1 cellspacing = 0 cellpadding = 0 >< tr >< td >< table border = 0 cellspacing = 0 cellpadding = 2 bgcolor = #ffffff >< tr >< td colspan = 7 bgcolor = #ffffff nowrap > ';
151

daysGrid += ' < a title = " 关闭日历 " href = " javascript:hideElement(/'' + eltName + '/') " >< B style = " color:black;background-color:blue " >< font color = white > ╳ </ font ></ B ></ a > ';
152

daysGrid += ' & nbsp; & nbsp;';
153

daysGrid += ' < a href = " javascript:incMonth(-1,/'' + eltName + '/') " > 《 </ a > ';
154

155

daysGrid += ' < b > ';
156

if (isThisMonth) { daysGrid += ' < font color = red > ' + months[month] + ' </ font > '; }
157

else { daysGrid += months[month]; }
158

daysGrid += ' </ b > ';
159

160

daysGrid += ' < a href = " javascript:incMonth(1,/'' + eltName + '/') " > 》 </ a > ';
161

if (month < 10 ) { daysGrid += ' & nbsp; & nbsp; & nbsp; & nbsp;'; }
162

daysGrid += ' & nbsp; & nbsp;';
163

daysGrid += ' < a href = " javascript:incYear(-1,/'' + eltName + '/') " > 《 </ a > ';
164

165

daysGrid += ' < b > ';
166

if (isThisYear) { daysGrid += ' < font color = red > ' + year + ' </ font > '; }
167

else { daysGrid += '' + year; }
168

daysGrid += ' </ b > ';
169

170

daysGrid += ' < a href = " javascript:incYear(1,/'' + eltName + '/') " > 》 </ a ></ td ></ tr > ';
171

daysGrid += ' < tr >< td bgcolor = gray colspan = 7 ></ td ></ tr > ';
172

daysGrid += ' < tr >< td align = right >< font color = red > 日 </ font ></ td >< td align = right > 一 </ td >< td align = right > 二 </ td >< td align = right > 三 </ td >< td align = right > 四 </ td >< td align = right > 五 </ td >< td align = right >< font color = red > 六 </ font ></ td ></ tr > ';
173

daysGrid += ' < tr >< td bgcolor = gray colspan = 7 ></ td ></ tr > ';
174

175

var dayOfMonthOfFirstSunday = ( 7 - startDay + 1 );
176

for ( var intWeek = 0 ; intWeek < 6 ; intWeek ++ ) {
177

var dayOfMonth;
178

for ( var intDay = 0 ; intDay < 7 ; intDay ++ ) {
179

dayOfMonth = (intWeek * 7 ) + intDay + dayOfMonthOfFirstSunday - 7 ;
180

if (dayOfMonth <= 0 ) {
181

daysGrid += " </td><td> " ;
182

} else if (dayOfMonth <= intDaysInMonth) {
183

var color = " blue " ;
184

if (day > 0 && day == dayOfMonth) color = " red " ;
185

if (dayOfMonth == displayDay) color = " green " ;
186

daysGrid += ' < td align = right >< a href = " javascript:setDay(';
187

daysGrid += dayOfMonth + ',/'' + eltName + '/') " ';
188

daysGrid += 'style = " color:' + color + ' " > ';
189

var dayString = dayOfMonth + " </a></td> " ;
190

if (dayString.length == 6 ) dayString = ' 0 ' + dayString;
191

daysGrid += dayString;
192

}
193

}
194

if (dayOfMonth < intDaysInMonth) daysGrid += " </tr> " ;
195

}
196

return daysGrid + " </table></td></tr></table> " ;
197

}
198

199

// 月份从0开始记数
200

function setDay(day,eltName) {
201

if (displayMonth < 9 )
202

{
203

strDisplayMonth = " 0 " + (displayMonth + 1 );
204

}
205

else
206

{
207

strDisplayMonth = (displayMonth + 1 );
208

}
209

if (day < 10 )
210

{
211

day = " 0 " + day;
212

}
213

displayElement.value = displayYear + " - " + strDisplayMonth + " - " + day;
214

hideElement(eltName);
215

}
216

217

218

// ——————————————————————————————————————
219

220

// fixPosition() 这个函数和前面所讲的那个函数一样
221

//
222

function fixPosition(eltname) {
223

elt = getXBrowserRef(eltname);
224

positionerImgName = eltname + 'Pos';
225

// hint: try setting isPlacedUnder to false
226

isPlacedUnder = false ;
227

if (isPlacedUnder) {
228

setPosition(elt,positionerImgName, true );
229

} else {
230

setPosition(elt,positionerImgName)
231

}
232

}
233

234

235

236

function toggleDatePicker(eltName,formElt) {
237

var x = formElt.indexOf('.');
238

var formName = formElt.substring( 0 ,x);
239

var formEltName = formElt.substring(x + 1 );
240

241

// Added by Wangjianke(jianke@itechs.iscas.ac.cn)
242

var attachedElement = document.forms[formName].elements[formEltName]
243

244

if (attachedElement) {
245

if (displayDivName && displayDivName != eltName) hideElement(displayDivName);
246

displayElement = attachedElement;
247

}
248

displayDivName = eltName;
249

250

var defaultDate = displayElement.value;
251

if ((defaultDate != "" ) && (defaultDate != " 0000-00-00 " ))
252

{
253

x = defaultDate.indexOf(' - ');
254

var defaultYear = defaultDate.substring( 0 ,x);
255

var y = defaultDate.indexOf(' - ',x + 1 );
256

var defaultMonth = defaultDate.substring(x + 1 ,y) - 1 ;
257

var defaultDay = defaultDate.substring(y + 1 );
258

259

displayYear = defaultYear;
260

displayMonth = defaultMonth;
261

displayDay = defaultDay;
262

}
263

// End Added
264

265

newCalendar(eltName,document.forms[formName].elements[formEltName]);
266

toggleVisible(eltName);
267

}
268

269

// -->