您的位置:首页 > Web前端 > JavaScript

JS创建日历控件

2011-03-10 14:31 309 查看
// JavaScript Document
/********************************************************************
主题:基于CSS&LI的日历显示
作者:Smart/Issac
说明:
1.调用GetCalendar(InputBoxId);
2.问题:IE5下隐含框架zIndex属性不支持;Mozilla下尚不支持若干方法.
********************************************************************/
/*创建框架*/
document.writeln("

");
document.writeln("");
var cDiv = document.getElementById("calendar");
var cFrame = document.getElementById("calendarBox");
/*基本参数*/
var meWidth = cDiv.clientWidth; //日历宽度
var meHeight= cDiv.clientHeight; //日历高度
var isHidden=true; //日历是否关闭
/*取得今日日期*/
function GetTodayDate() {
today=new Date();
yy=today.getYear();
mm=(today.getMonth() + 1);
if (mm<10)
mm='0'+mm;
dd=today.getDate();
if (dd<10)
dd='0'+dd;
return yy+'-'+mm+'-'+dd
}
/*输入今天日期*/
function SetTodayDate(InputBoxId) {
HiddenCalendar();
document.getElementById(InputBoxId).value=GetTodayDate();
}
/*取某年某月第一天的星期值(月份-1)*/
function GetFirstWeek(theYear,theMonth) {
return (new Date(theYear,theMonth-1,1)).getDay();
}
/*取某年某月中总天数*/
function GetThisDays(theYear,theMonth) {
return (new Date(theYear,theMonth,0)).getDate();
}
/*取某年某月上个月中总天数*/
function GetLastDays(theYear,theMonth) {
return (new Date(theYear,theMonth-1,0)).getDate();
}
/*判断是否是闰年*/
function LeapYear(theYear) {
if ((theYear%400==0) || ((theYear%4==0) && (theYear%100!=0)))
return true;
else
return false;
}
/*判断日期(YYYY-MM-DD)的日期是否正确*/
function DateIsTrue(asDate) {
var lsDate=asDate + "";
var loDate=lsDate.split("-");
if (loDate.length!=3)
return false;
var liYear=parseFloat(loDate[0]);
var liMonth=parseFloat(loDate[1]);
var liDay=parseFloat(loDate[2]);
if ((loDate[0].length>4)||(loDate[1].length>2)||(loDate[2].length>2))
return false;
if (isNaN(liYear)||isNaN(liMonth)||isNaN(liDay))
return false;
if ((liYear<1800)||(liYear>2500))
return false;
if ((liMonth>12)||(liMonth<=0))
return false;
if (GetThisDays(liYear,liMonth)<10)
Month='0'+Month;
if (Day<10)
Day='0'+Day;
document.getElementById(InputBoxId).value=Year+"-"+Month+"-"+Day;
}
/*上一月*/
function PrevMonth(InputBoxId,Year,Month,Day) {
Month=Month-1;
if (Month<1) {
Month=12;
Year=Year-1;
if (Year<1800)
Year=2500;
}
Day=((GetThisDays(Year,Month)12) {
Month=1;
Year=Year+1;
if (Year>2500)
Year=1800;
}
Day=((GetThisDays(Year,Month)<1800)
Year=2500;
Day=((GetThisDays(Year,Month)2500)
Year=1800;
Day=((GetThisDays(Year,Month)winWidth)&&(meWidthwinHeight)&&(meHeight";
FrameContent+="
«
"+nowYear+"年»

";
FrameContent+="
«
"+monthText[nowMonth-1]+"»

";
FrameContent+="";
FrameContent+="
";
FrameContent+="

";
for (i=0; i<7; i++)
FrameContent+="
"+weekText[i]+"

";
FrameContent+="

";
FrameContent+="
";
FrameContent+="
";
FrameContent+="

";
if (fw!=0){ //第一行上月日期
for (i=(ld-fw+1);i<=ld;i++) {
if ((w%7)==0)
FrameContent+="
"+i+"

";
else
FrameContent+="
"+i+"

";
w++;
}
}
for (i=1; i<=td; i++) {
if ((w%7)==0)
FrameContent+="
"+i+"

";
else if ((w%7)==6)
FrameContent+="
"+i+"

";
else
FrameContent+="
"+i+"

";
w++;
}
if (nfw!=0)
for (i=1; i<=(7-nfw); i++)
FrameContent+="
"+i+"

";
FrameContent+="

";
FrameContent+="
";
FrameContent+="
";
FrameContent+="今天
";
FrameContent+="取消
";
FrameContent+="
";
cDiv.innerHTML=FrameContent;
cDiv.style.display="block";
cDiv.style.zIndex = 1107;
//鼠标经过效果以及周末颜色标志
var weekLi = document.getElementById("week").getElementsByTagName("li");
weekLi[0].className = "sun";
weekLi[6].className = "sat";
var dayLi = document.getElementById("day").getElementsByTagName("li");
for (var i=0; i
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: