当前页面: 开发资料首页 → Javascript 专题 → 一个很好的日历控件(采用javascript编写)
摘要: 一个很好的日历控件(采用javascript编写)
该日历控件采用js编写,来自MS的 http://expo.live.com,本站整理,希望对大家有用。 td.negDate a 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; } 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; }
本程序中需要的两个图片:
http://expo.live.com/Images/leftArrow.gif
http://expo.live.com/Images/rightArrow.gif
Global.css<?XML:NAMESPACE PREFIX = O />
{
color: #808080;
}
.calendar
{
{
{
{
{Global.js
调用
<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%">