JavaScript实现日历控件

最新推荐文章于 2025-08-07 21:48:39 发布

原创最新推荐文章于 2025-08-07 21:48:39 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #date #textbox #日历 #calendar

var strFrame;

//日历用iframe实现

document.writeln('<iframe id=yyDateLayer frameborder=no scrolling=no Author=yy style="position: absolute; width: 145; height: 168; z-index: 9998;display=none"></iframe>')

//ifram中用div定位

strFrame+='<div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false">'

strFrame+='<span id=tmpSelectYearLayer style="z-index: 9999;position: absolute;top: 2; left: 18;display: none"></span>';

strFrame+='<span id=tmpSelectMonthLayer style="z-index: 9999;position: absolute;top: 2; left: 75;display: none"></span>';

strFrame+='<table border=0 cellspacing=1 cellpadding=0 width=142 height=160 bgcolor=#808080 onselectstart="return false" Author=yy>';

strFrame+='<tr>';

strFrame+='<td width=142 height=23 bgcolor=#FFFFFF>';

strFrame+='<table border=0 cellspacing=1 cellpadding=0 width=140 height=23 Author=yy>';

strFrame+='<tr align=center>'

strFrame+='<td width=20 Author=yy align=center bgcolor=#808080 style="font-size:12px;cursor: hand;color: #FFD700" ';

strFrame+=' onclick="parent.yyPrevM()" title="向前翻月" ><b Author=yy><<</b>';

strFrame+=' </td>'

strFrame+='<td width=60 align=right style="font-size:12px;cursor:default" title="点击这里选择年份">';

strFrame+=' <span width=60 Author=yy id=yyYearHead onclick="parent.tmpSelectYearInnerHTML(this.innerText)"></span> 年 ';

strFrame+='</span>';

strFrame+='<td width=48 align=left style="font-size:12px;cursor:default" title="点击这里选择月份">';

strFrame+='<span id=yyMonthHead Author=yy onclick="parent.tmpSelectMonthInnerHTML(this.innerText)"></span> 月';

strFrame+='</td>';

strFrame+=' <td width=20 bgcolor=#808080 align=center style="font-size:12px;cursor: hand;color: #FFD700" ';

strFrame+=' onclick="parent.yyNextM()" title="往后翻月" Author=yy><b Author=yy>>></b></td></tr>';

strFrame+=' </table></td></tr>';

strFrame+=' <tr><td width=142 height=18 bgcolor=#808080>';

strFrame+='<table border=0 cellspacing=0 cellpadding=0 width=140 height=1 style="cursor:default">';

strFrame+='<tr align=center><td style="font-size:12px;color:#FFFFFF" Author=yy>日</td>';

strFrame+='<td style="font-size:12px;color:#FFFFFF" Author=yy>一</td><td style="font-size:12px;color:#FFFFFF" Author=yy>二</td>';

strFrame+='<td style="font-size:12px;color:#FFFFFF" Author=yy>三</td><td style="font-size:12px;color:#FFFFFF" Author=yy>四</td>';

strFrame+='<td style="font-size:12px;color:#FFFFFF" Author=yy>五</td><td style="font-size:12px;color:#FFFFFF" Author=yy>六</td></tr>';

strFrame+='</table></td></tr>';

strFrame+=' <tr><td width=142 height=120>';

strFrame+=' <table border=0 cellspacing=1 cellpadding=0 width=140 height=120 bgcolor=#FFFFFF>';

var n=0;

for (j=0;j<5;j++)

{

strFrame+='<tr align=center>';

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

{

strFrame+='<td width=20 height=20 id=yyDay'+n+' style="font-size:12px" onclick=parent.yyDayClick(this.innerText)></td>';n++;

}

strFrame+='</tr>';

}

strFrame+=' <tr align=center><td width=20 height=20 style="font-size:12px" id=yyDay35 Author=yy ';

strFrame+=' onclick=parent.yyDayClick(this.innerText)></td>';

strFrame+=' <td width=20 height=20 style="font-size:12px" id=yyDay36 Author=yy onclick=parent.yyDayClick(this.innerText)></td>';

strFrame+=' <td colspan=5 align=right Author=yy><span onclick=parent.closeLayer() style="font-size:12px;cursor: hand"';

strFrame+=' Author=yy><u>关闭</u></span></td></tr>';

strFrame+=' </table></td></tr><tr><td>';

strFrame+=' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF>';

strFrame+=' <tr>';

strFrame+='</tr></table></td></tr></table></div>';

window.frames.yyDateLayer.document.writeln(strFrame);

window.frames.yyDateLayer.document.close(); //解决ie进度条不结束的问题

var outObject;

var odatelayer=window.frames.yyDateLayer.document.all; //存放日历对象

function setday(tt,obj) //主调函数

{

if (arguments.length > 2){alert("对不起！传入本控件的参数太多！");return;}

if (arguments.length == 0){alert("对不起！您没有传回本控件任何参数！");return;}

var dads = document.all.yyDateLayer.style;

var th = tt;

var ttop = tt.offsetTop; //TT控件的定位点高

var thei = tt.clientHeight; //TT控件本身的高

var tleft = tt.offsetLeft; //TT控件的定位点宽

var ttyp = tt.type; //TT控件的类型

while (tt = tt.offsetParent){ttop+=tt.offsetTop; tleft+=tt.offsetLeft;}

dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;

dads.left = tleft;

outObject = (arguments.length == 1) ? th : obj;

outButton = (arguments.length == 1) ? null : th; //设定外部点击的按钮

dads.top = (ttyp=="image")? ttop+thei : ttop+thei+6;

dads.left = tleft;

outObject = (arguments.length == 1) ? th : obj;

dads.display = '';

event.returnValue=false;

}

////////////////////////

var MonHead = new Array(12);

MonHead[0] = 31; MonHead[1] = 28; MonHead[2] = 31; MonHead[3] = 30; MonHead[4] = 31; MonHead[5] = 30;

MonHead[6] = 31; MonHead[7] = 31; MonHead[8] = 30; MonHead[9] = 31; MonHead[10] = 30; MonHead[11] = 31;

var yyTheYear=new Date().getFullYear();

var yyTheMonth=new Date().getMonth()+1;

var yyWDay=new Array(37);

function document.onclick()

{

with(window.event.srcElement)

{ if (getAttribute("Author")==null && tagName != "INPUT")

document.all.yyDateLayer.style.display="none";

}

function yyWriteHead(yy,mm)

{

window.frames.yyDateLayer.document.all.yyYearHead.innerText = yy ;

window.frames.yyDateLayer.document.all.yyMonthHead.innerText = mm;

}

function tmpSelectYearInnerHTML(strYear) //年份的下拉框

{

if (strYear.match(/D/)!=null){alert("年份输入参数不是数字！");return;}

var m = (strYear) ? strYear : new Date().getFullYear();

if (m < 1000 || m > 9999) {alert("年份值不在 1000 到 9999 之间！");return;}

var n = m - 10;

if (n < 1000) n = 1000;

if (n + 26 > 9999) n = 9974;

var s = "<select Author=yy name=tmpSelectYear style='font-size: 12px' "

s += "onblur='document.all.tmpSelectYearLayer.style.display="none"' "

s += "onchange='document.all.tmpSelectYearLayer.style.display="none";"

s += "parent.yyTheYear = this.value; parent.yySetDay(parent.yyTheYear,parent.yyTheMonth)'> ";

var selectInnerHTML = s;

for (var i = n; i < n + 26; i++)

{

if (i == m)

{selectInnerHTML += "<option Author=yy value='" + i + "' selected>" + i + "年" + "</option> ";}

else {selectInnerHTML += "<option Author=yy value='" + i + "'>" + i + "年" + "</option> ";}

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectYearLayer.style.display="";

odatelayer.tmpSelectYearLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectYear.focus();

}

//月份下拉框

function tmpSelectMonthInnerHTML(strMonth)

{

if (strMonth.match(/D/)!=null){alert("月份输入参数不是数字！");return;}

var m = (strMonth) ? strMonth : new Date().getMonth() + 1;

var s = "<select Author=yy name=tmpSelectMonth style='font-size: 12px' "

s += "onblur='document.all.tmpSelectMonthLayer.style.display="none"' "

s += "onchange='document.all.tmpSelectMonthLayer.style.display="none";"

s += "parent.yyTheMonth = this.value; parent.yySetDay(parent.yyTheYear,parent.yyTheMonth)'> ";

var selectInnerHTML = s;

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

{

if (i == m)

{selectInnerHTML += "<option value='"+i+"' selected>"+i+"月"+"</option> ";}

else {selectInnerHTML += "<option value='"+i+"'>"+i+"月"+"</option> ";}

}

selectInnerHTML += "</select>";

odatelayer.tmpSelectMonthLayer.style.display="";

odatelayer.tmpSelectMonthLayer.innerHTML = selectInnerHTML;

odatelayer.tmpSelectMonth.focus();

}

function closeLayer()

{

document.all.yyDateLayer.style.display="none";

}

function document.onkeydown()

{

if (window.event.keyCode==27)document.all.yyDateLayer.style.display="none";

}

function IsPinYear(year)

{

if (0==year%4&&((year%100!=0)||(year%400==0))) return true;else return false;

}

function GetMonthCount(year,month)

{

var c=MonHead[month-1];if((month==2)&&IsPinYear(year)) c++;return c;

}

function GetDOW(day,month,year)

{

var dt=new Date(year,month-1,day).getDay()/7; return dt;

}

function yyPrevY()

{

if(yyTheYear > 999 && yyTheYear <10000){yyTheYear--;}

else{alert("年份超出范围（1000-9999）！");}

yySetDay(yyTheYear,yyTheMonth);

}

function yyNextY()

{

if(yyTheYear > 999 && yyTheYear <10000){yyTheYear++;}

else{alert("年份超出范围（1000-9999）！");}

yySetDay(yyTheYear,yyTheMonth);

}

function yyToday()

{

yyTheYear = new Date().getFullYear();

yyTheMonth = new Date().getMonth()+1;

yySetDay(yyTheYear,yyTheMonth);

}

function yyPrevM()

{

if(yyTheMonth>1){yyTheMonth--}else{yyTheYear--;yyTheMonth=12;}

yySetDay(yyTheYear,yyTheMonth);

}

function yyNextM()

{

if(yyTheMonth==12){yyTheYear++;yyTheMonth=1}else{yyTheMonth++}

yySetDay(yyTheYear,yyTheMonth);

}

function yySetDay(yy,mm)

{

yyWriteHead(yy,mm);

for (var i = 0; i < 37; i++){yyWDay[i]=""};

var day1 = 1,firstday = new Date(yy,mm-1,1).getDay();

for (var i = firstday; day1 < GetMonthCount(yy,mm)+1; i++){yyWDay[i]=day1;day1++;}

for (var i = 0; i < 37; i++)

{ var da = eval("window.frames.yyDateLayer.document.all.yyDay"+i)

if (yyWDay[i]!="")

{ da.innerHTML = "<b>" + yyWDay[i] + "</b>";

da.style.backgroundColor = (yy == new Date().getFullYear() &&

mm == new Date().getMonth()+1 && yyWDay[i] == new Date().getDate()) ? "#FFD700" : "#ADD8E6";

da.style.cursor="hand"

}

else{da.innerHTML="";da.style.backgroundColor="";da.style.cursor="default"}

}

function yyDayClick(n)

{

var yy = yyTheYear;

var mm = yyTheMonth;

if (mm < 10){mm = "0" + mm;}

if (outObject)

{

if (!n) {outObject.value=""; return;}

if ( n < 10){n = "0" + n;}

outObject.value= yy + "-" + mm + "-" + n ;

closeLayer();

}

else {closeLayer(); alert("您所要输出的控件对象并不存在！");}

}

yySetDay(yyTheYear,yyTheMonth);

function show_calendar_time(str_target,str_datetime){

var args,urls,tmp;

args = new Array(3);

args[0] = str_target;

args[1] = str_datetime;

args[2] = self;

urls = "../UserControls/Date/calendar_time.html";

if (str_datetime.length > 0){

var re_date = /^(d+)-(d+)-(d+)s+(d+):(d+):(d+)$/;

if (re_date.exec(str_datetime)){

urls += "?";

urls += RegExp.$1;

urls += RegExp.$2;

tmp = new Date (RegExp.$1, RegExp.$2-1, RegExp.$3, RegExp.$4, RegExp.$5, RegExp.$6);

urls += tmp.getTime();

}

window.showModalDialog(urls, args,

"dialogWidth:260px;dialogHeight:300px;help=no;");

}

然后调用

<HTML>

<HEAD>

<title>DateSelectSample</title>

</HEAD>

<asp:TextBox id="TextBox1" onfocus="setday(this)" style="Z-INDEX: 101; LEFT: 160px; POSITION: absolute; TOP: 336px"

runat="server"></asp:TextBox></FONT>

</form>

</body>

</HTML>