自己写的日历空间,正在完善~~ 先秀秀
<HTML> <TITLE>日历控件-beat-1</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <HEAD> <style type="text/css"> .tableCss { font-size:12px; font-family:宋体; border : thin outset buttonface; border-collapse : separate; text-align:center; filter: progid:DXImageTransform.Microsoft.Gradient( endColorstr="#FCA5A5", startColorstr="#FBE2E2", gradientType="0") } </style> </HEAD> <BODY> <form> <select><option>333333</option><option>2222</option><option>111</option></select> <BR><BR><BR> <input type="text" id="myDate" οnclick="DateControl( this );" />
<input type="text" id="youDate" οnclick="DateControl( this );" /> <BR><BR><BR> <select><option>333333</option><option>2222</option><option>111</option></select> </form> </BODY> <SCRIPT LANGUAGE="JavaScript">
document.write( "<div style=/"position:absolute;left:0px;top:0px;z-index:5;display:none;/" id=/"MyDateControl/"></div>" ); //截取连边空格 String.prototype.trim = function () { return this.replace( /(^/s*)|(/s*$)/g, "" ); }
//判断是否是日期 function isDateTimeType( testValue ) { var Contain =/^/d{4}-/d{1,2}-/d{1,2}$/; return ( Contain.exec( testValue ) == null)? false : true; } var SelectMonthValue = new Date().getMonth() + 1;//选择月值 var SelectYearValue = new Date().getYear();//选择年值 var SelectDateValue = new Date().getDate(); var SelectDocumentDateInfo = "";//表行信息 var SelectDocumentDateHead = "";//表头信息 var SelectDocumentDateFoot = "";//表尾
SelectDocumentDateHead += "<table class=/"tableCss/" Id=/"myTable/" cellSpacing=/"2/" cellPadding=/"2/">" ; SelectDocumentDateHead += "<tr>"; SelectDocumentDateHead += "<td ><a href=/"javascript:changeMyDate(-1)/" style=/"text-decoration: none;/">▼</a></td>"; SelectDocumentDateHead += "<td colspan=/"5/"><div id=/"myDateDisplay/"></div></td>"; SelectDocumentDateHead += "<td ><a href=/"javascript:changeMyDate(1)/" style=/"text-decoration: none;/">▲<a/></td>"; SelectDocumentDateHead += "</tr>"; SelectDocumentDateHead += "<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>"; SelectDocumentDateFoot = "</tabel>"; SelectDocumentDateFoot += "<iframe style=/"position:absolute;z-index:-1;filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0,finishOpacity=0);/" height=/"167px/" width=/"133px/" ></iframe>" ;
//下拉单月份改变 function changeMyDate( nMonth ) { SelectMonthValue += nMonth; if( SelectMonthValue >12 ) { SelectYearValue++; SelectMonthValue = 1; } else if( SelectMonthValue < 1 ) { SelectYearValue--; SelectMonthValue = 12; }
WriteDateRow( ); DisplayDateControl( objInputDate ); document.getElementById("myDateDisplay").innerHTML = SelectYearValue+"年"+ SelectMonthValue +"月"; }
var aryBigMonth = new Array( 1,3,5,7,8,10,12 ) ; var arySmallMonth = new Array( 2,4,6,9,11 ) ; //得到年月的天数 function getMyMonthDays( year, month ) { //四年一闰，百年不闰，四百年再闰 var isRunYear = ( year % 4 == 0 && year % 100 != 0 ) || ( year % 400 == 0 ) var days = 0; for( var i = 0 ; i < aryBigMonth.length; i++ ) { if ( aryBigMonth[i] == month ) { days = 31 break; } } if( days < 1 ) { for( var j = 0 ; j < arySmallMonth.length; j++ ) { if ( arySmallMonth[j] == month ) { if( month == 2 && isRunYear ) { days = 29; } else if ( month == 2 ) { days = 28; } else { days = 30; } break; } } } return days ; } //选择日期后改变底色 function getSelectDate( objTb ) { var objTable = document.getElementById( "myTable" );
for( var i = 2 ; i< objTable.rows.length; i++ ) { for( var j = 0; j < 7; j++ ) { objTable.rows[i].cells[j].style.backgroundColor = ""; } } objTb.style.backgroundColor = "#FC9494"; objInputDate.value = SelectYearValue+"-"+SelectMonthValue+"-"+objTb.innerText; } //循环写入选择日期 function WriteDateRow() { var SelectMonthDays = getMyMonthDays( SelectYearValue, SelectMonthValue ); var SelectCurrentMonthDays = 0; if( SelectMonthValue - 1 == 0 ) { SelectCurrentMonthDays = getMyMonthDays( SelectYearValue - 1, 12 ); } else { SelectCurrentMonthDays = getMyMonthDays( SelectYearValue, SelectMonthValue - 1 ); } SelectDocumentDateInfo = ""; var NowDay = new Date( SelectYearValue, SelectMonthValue - 1, 1 ); var nWeek = NowDay.getDay(); var MyRow = (( nWeek + SelectMonthDays )%7 == 0 ) ?( nWeek + SelectMonthDays )/7 : Math.floor(( nWeek + SelectMonthDays )/7 + 1); var MyDate = 1; var MyLastDate = 1; for ( var i = 0; i< MyRow; i++ ) { SelectDocumentDateInfo +="<tr>"; for( var j = 0; j< 7; j++ ) { if( i == 0 && j< nWeek ) { SelectDocumentDateInfo += "<td style=/"color:#aaaaaa/">"+ ( SelectCurrentMonthDays - nWeek + 1 + j ) +"</td>"; } else if( MyDate <= SelectMonthDays ) { if( MyDate == new Date().getDate() && SelectYearValue == new Date().getYear() && SelectMonthValue == new Date().getMonth()+1 ) { SelectDocumentDateInfo += "<td onClick=/"getSelectDate( this );/" style=/"border : 1px groove #000000;/">"+MyDate+"</td>"; } else if( MyDate == SelectDateValue ) { SelectDocumentDateInfo += "<td onClick=/"getSelectDate( this );/" style=/"background-color:#FC9494/">"+MyDate+"</td>"; } else { SelectDocumentDateInfo += "<td onClick=/"getSelectDate( this );/">"+MyDate+"</td>"; } MyDate++; } else { SelectDocumentDateInfo += "<td style=/"color:#aaaaaa/">"+MyLastDate+"</td>"; MyLastDate++; } } SelectDocumentDateInfo +="</tr>"; } document.getElementById( "MyDateControl" ).innerHTML = ""; document.getElementById( "MyDateControl" ).innerHTML = SelectDocumentDateHead + SelectDocumentDateInfo + SelectDocumentDateFoot; document.getElementById( "myDateDisplay" ).innerHTML = SelectYearValue+"年"+ SelectMonthValue +"月"; }
var objInputDate = null; var minTop = 0;//最小y坐标 var maxTop = 0;//最大y坐标 var minLeft = 0;//最大x坐标 var maxLeft = 0;//最大x坐标 var objDate = document.getElementById( "MyDateControl" );
//页面触发 function DateControl( objInput ) { objInputDate = objInput;
if( isDateTimeType( objInputDate.value.trim() ) ) { var aryDate = objInputDate.value.trim().split('-'); SelectYearValue = parseInt( aryDate[0] ); SelectMonthValue = parseInt( aryDate[1] ); SelectDateValue = parseInt( aryDate[2] ); } else { SelectYearValue = new Date().getYear(); SelectMonthValue = new Date().getMonth() + 1; SelectDateValue = new Date().getDate(); } WriteDateRow(); DisplayDateControl( objInputDate ); } //日期显示位置 function DisplayDateControl( objInput ) { var top = objInput.offsetTop; var left = objInput.offsetLeft; var height = objInput.offsetHeight;
objDate.style.display = "block"; var scrollTop = document.body.scrollTop;//页面滚动被遮挡高度 var dateHeight = objDate.offsetHeight;//控件高度 var clientH = document.body.clientHeight;
minLeft = left; maxLeft = minLeft + objDate.offsetWidth; if( clientH - top - height + scrollTop >= dateHeight ) { objDate.style.top = top + height; minTop = top + height - scrollTop; maxTop = minTop + dateHeight; } else { objDate.style.top = top - dateHeight; maxTop = top - scrollTop; minTop = maxTop - dateHeight; } objDate.style.left = left; }
//页面隐藏控件 document.onmousedown = function () { if( event.clientX > maxLeft || event.clientX < minLeft || event.clientY > maxTop || event.clientY < minTop ) { objDate.style.display = "none"; } }
//鼠标位置 function mouseMoveInPage() { window.status = event.clientX + "px, "+ event.clientY+"px"; }
document.onmousemove = mouseMoveInPage; </SCRIPT></HTML>
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
