站内搜索: 请输入搜索关键词

当前页面: 开发资料首页Javascript 专题一个很好的日历控件(采用javascript编写)

一个很好的日历控件(采用javascript编写)

摘要: 一个很好的日历控件(采用javascript编写)


该日历控件采用js编写,来自MS的 http://expo.live.com,本站整理,希望对大家有用。

本程序中需要的两个图片:
http://expo.live.com/Images/leftArrow.gif
http://expo.live.com/Images/rightArrow.gif

Global.css<?XML:NAMESPACE PREFIX = O />

td.negDate a
{
color: #808080;
}
.calendar

{

padding-left: 4px;

padding-right: 4px;

}

.calendar table
{

border-bottom: solid 1px #366AB3;

text-align: center;

padding: 0;

}

.calendar table a
{

color: black;

}

.calendar td {

padding: 4px;

font-size: 8pt;

font-weight: lighter;

}

.calendarhd
{

color: #366AB3;

text-transform: uppercase;

}

.calendarDays
{

border-bottom: solid 1px;

color: #808080;

padding: 0;

margin: 0;

}

.selectedDate {

background: orange;

}

.selectedDate a {

color: white !important;

}

Global.js

var calendar_DayNames = new Array("日","一","二","三","四","五","六");

var calendar_MonthNames = new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");

function showCalendar(targetID, targetURL, dMonth, dYear, dDay)

{

if(dMonth < 0)

{

dMonth = 11;

dYear--;

}

if(dMonth > 11)

{

dMonth = 0;

dYear++;

}

var dNow = new Date();

if(dDay == 90 && dMonth == dNow.getMonth() && dYear == dNow.getYear()) dDay = dNow.getDate();

var dCurFD = new Date(dYear, dMonth, 1);

var dGivenDate = new Date(dYear, dMonth, dDay);

var dCurrentMonthFirstSunday = dCurFD.getDay();

var dCurrentViewDate = new Date(dCurFD);

var iDays = 0;

var weekMilliseconds = 1000*60*60*24*7;

if(dCurrentMonthFirstSunday > 0) iDays = -dCurrentMonthFirstSunday;

var fTrgt = targetURL;

while (fTrgt.indexOf("'") >= 0) fTrgt = fTrgt.replace("'", "`");

while (fTrgt.indexOf("`") >= 0) fTrgt = fTrgt.replace("`", "\\'");

var oBuf = '<table BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">';

oBuf += '<tr><td CLASS="calendarhd"></td>';

oBuf += '<td COLSPAN="5" CLASS="calendarhd">' + (calendar_MonthNames[dMonth]) + ' ' + dYear + '</td>';

oBuf += '<td CLASS="calendarhd"></td></tr>';

oBuf += '<tr style="calendarhdrow">';

for(var e=0; e < 7; e++) oBuf += '<td CLASS="calendarDays">' + calendar_DayNames[e] + '</td>';

oBuf += '</tr>';

var nextMonthFirstDay = new Date(dYear, dMonth+1, 1);

var IsNextMonthFirstDaySunday = nextMonthFirstDay.getDay()==0;

for(var iRows=0; iRows < 6; iRows++)

{

dCurrentMonthDate = new Date(dCurFD.getFullYear(), dCurFD.getMonth(), dCurFD.getDate() + iDays);

if(1==1)

{

if(iRows==5 && dCurrentMonthDate.getMonth() > dCurFD.getMonth()) continue;

if(iRows==5 && IsNextMonthFirstDaySunday) continue;

oBuf += '<tr CLASS="calendarContent">';

for(var iCols=0; iCols < 7; iCols++)

{

dCurrentViewDate = new Date(dCurFD.getFullYear(), dCurFD.getMonth(), dCurFD.getDate() + iDays);

if((dGivenDate.toDateString() == dCurrentViewDate.toDateString()) && (dDay != 90))

{

oBuf += '<td CLASS="selectedDate">';

}

else

{

if(dCurrentViewDate.getMonth() != dMonth || iDays < 0)

{

oBuf += '<td CLASS="negDate">';

}

else

{

oBuf += '<td CLASS="posDate">';

}

}

var args;

if (targetURL.substr(0,11) == 'javascript:')

{

args = dCurrentViewDate.valueOf() + ")";

}

else

{

var sep = targetURL.indexOf('?') < 0 ? '?' : '&';

args = sep + 'startDate=' + dCurrentViewDate.getFullYear()+ '-' + (dCurrentViewDate.getMonth()+1) + '-' +dCurrentViewDate.getDate() ;

}

oBuf += '' + dCurrentViewDate.getDate() + '</td>';

iDays++;

}

oBuf += '</tr>';

}

}

oBuf += '</table>';

document.getElementById(targetID).innerHTML = oBuf;

}

调用

<link> href="Global.css" rel="stylesheet">
<script type="text/javascript" src="global.js"></script>

<script type="text/javascript">

var dNow = new Date();

showCalendar('calendar1', FileName.aspx', dNow.getMonth(), dNow.getFullYear(), dNow.getDate())

</script>

</td> </tr> <tr> <td vAlign=top align=left height="100%">
↑返回目录
前一篇: 关于动态控制 input type="image"对象
后一篇: 制作类似于Title、ALT的提示效果