<script language="javascript" type="text/javascript"> //日历 var date_start,date_end,g_object var today = new Date(); var separator="-"; var inover=false; //mode :时间变换的类型0-年 1-月 2-直接选择月 function change_date(temp,mode) { var t_month,t_year if (mode){ if(mode==1) t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10); else t_month=parseInt(temp) if (t_month cele_date_month.options(cele_date_month.length-1).text){ cele_date_month.value=cele_date_month.options(0).text; change_date(parseInt(cele_date_year.value,10)+1,0); } else {cele_date_month.value=t_month; set_cele_date(cele_date_year.value,cele_date_month.value); } } } else{ t_year=parseInt(temp,10); if (t_year parseInt(cele_date_year.options(cele_date_year.length-1).text,10)){ cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text; set_cele_date(cele_date_year.value,12); } else {cele_date_year.value=t_year; set_cele_date(cele_date_year.value,cele_date_month.value); } } } /*********2002-02-01 MODIFY BY WING **************/ window.cele_date.focus(); /****************MODIFY END***********************/ } //初始化日历 function init(d_start,d_end) { var temp_str; var i=0 var j=0 date_start=new Date(1980,7,1) date_end=new Date(2004,8,1) document.writeln("
"; temp_str+=""+i.toString()+""; } temp_str+="-"; temp_str+="" temp_str+=" | ||||||
" temp_str+="日 | ";temp_str+="一 | "; temp_str+="二 | "; temp_str+="三 | " temp_str+="四 | ";temp_str+="五 | "; temp_str+="六 |
? |
"; temp_str+=""; temp_str+=" |
"+Glob_YY+""+Glob_MM+" |
< head >
< style type = " text/css " >
.TrTitle ... {
background:#D4D0C8;
height:20;
border-bottom:5px solid #D4D0C8;
color:#000; cursor: hand;
}
.TrOver ... {
background:#808080;
height:18;
border:0px solid #999999;
color:#D4D0C8; cursor: hand;
}
.TdOver ... {
background:#ffffff;
height:18;width:22px;
border:0px solid #cccccc;
color:#000;cursor: hand;
}
.TdOut ... {
background:#C6D3EF;
height:16;width:20px;
border:1px solid #3169C6;
color:#333333; cursor: hand;
}
.TdOver2 ... {
background:#e6e6e6;
height:18;
border:1px solid #cccccc;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
color:#666666;cursor: hand;
}
.TdOut2 ... {
background:#e6e6e6;
height:18;
border:1px solid #ffffff;
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
color:#000000; cursor: hand;
}
</ style >
< script language = " javascript " type = " text/javascript " >
document.writeln( " <div id='DateGird' style='display:none;position: absolute;border:1px solid #404040;background-color: #D4D0C8;'></div> " );
var Glob_YY = parseInt( new Date().getFullYear());
var Glob_MM = parseInt( new Date().getMonth() + 1 );
var Glob_DD = parseInt( new Date().getDate());
function shotable(InputName)
... {
var DateArray=["日","一","二","三","四","五","六"];
var output=""
output=output+"<div style='padding:5px;border-top:1px solid #f4f4f4;border-left:1px solid #f4f4f4;'><table style='width:156px;font-size:9pt;cursor:default;border:0px solid #999999;' border='0' cellpadding='0' cellspacing='0'>";
output=output+"<tr ><td colspan='7' class='TrTitle'><span ID='yearUU'>"+Glob_YY+"</span><span ID='monthUU'>"+Glob_MM+"</span></td></tr><table>";
output=output+"<table style='font-size:12px;font-family: "宋体", Helvetica, sans-serif;cursor:default;border:0px solid #999999;border-top:1px solid #404040;border-left:1px solid #404040;border-right:1px solid #efefef;border-bottom:1px solid #efefef;' border='1' cellpadding='0' cellspacing='0'>";
output=output+"<tr align='center'>";
for(var i=0;i<7;i++) output=output+"<td class='TrOver'>"+DateArray[i]+"</td>";
output=output+"</tr>";
for(var i=0;i<6;i++)...{
output=output+"<tr align='center'>";
for(var j=0;j<7;j++) output=output+"<td id='TD' name='TD' class='TdOver' οnmοuseοver='datelist.OverBK(this,""+InputName.name+"")' msg=''> </td>";
output=output+"</tr>";
}
output=output+"</tabe></div>";
var selectMMInnerHTML = "<select ID="sMonth" οnchange="setPan(document.getElementById('sYear').value,this.value)" style='width:50px;'>";
for (var i = 1; i < 13; i++)
...{
if (i == Glob_MM)
...{selectMMInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "月" + "</option> ";}
else ...{selectMMInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "月" + "</option> ";}
}
selectMMInnerHTML += "</select>";
var selectYYInnerHTML = "<select ID="sYear" οnchange="setPan(this.value,document.getElementById('sMonth').value)" style='width:65px;'>";
for (var i = 1999; i <= Glob_YY; i++)
...{
if (i == Glob_YY)
...{selectYYInnerHTML += "<option Author=wayx value='" + i + "' selected>" + i + "年" + "</option> ";}
else ...{selectYYInnerHTML += "<option Author=wayx value='" + i + "'>" + i + "年" + "</option> ";}
}
selectYYInnerHTML += "</select>";
document.getElementById("DateGird").innerHTML= output;
document.getElementById("monthUU").innerHTML= selectMMInnerHTML;
document.getElementById("yearUU").innerHTML= selectYYInnerHTML;
//document.writeln(output);
}
function classGetDate(sName)
... {
this.obj=sName || "uncDate";
//alert(Date.parse(this.obj.value));
this.YY=Glob_YY;
this.MM=Glob_MM;
this.DD=Glob_DD;
document.getElementById("DateGird").style.display="";
setPan(this.YY,this.MM);
}
function GetDay(y,m) ... {
this.TDate=function()...{
this.DayArray=[];
for(var i=0;i<42;i++)this.DayArray[i]=" ";
for(var i=0;i<new Date(y,m,0).getDate();i++)this.DayArray[i+new Date(y,m-1,1).getDay()]=i+1;
return this.DayArray;
}
return this;
}
function setPan(YY,MM)
... {
var DArray=GetDay(YY,MM).TDate();
var TDArr=document.getElementsByName("TD");
if (MM<10)...{var showMM="0"+MM;}else...{var showMM=MM;}
for(var i=0;i<TDArr.length;i++)...{
if (Glob_DD==DArray[i]&&YY==new Date().getFullYear()&&MM==new Date().getMonth()+1)...{TDArr[i].className="TdOut";}else...{TDArr[i].className="TdOver"}
TDArr[i].innerHTML=DArray[i];
if (DArray[i]<10)...{var showDD="0"+DArray[i];}else...{var showDD=DArray[i];}
TDArr[i].msg=YY+"-"+showMM+"-"+showDD;
}
}
datelist = ... {
dfd:function (sName)
...{
var dateGirdObj=document.getElementById("DateGird");
//var i= sName.style.top
dateGirdObj.style.top=cmGetY(sName)+20;
dateGirdObj.style.left=cmGetX(sName);
shotable(sName);
classGetDate(sName);
},
OverBK:function(t,m)...{
if(t.className!="TdOut")...{
t.onmouseout=function()...{t.className="TdOver";}
}
if(t.innerHTML!=" ")t.className="TdOut";
t.onclick=function()...{
if (t.innerHTML!=" ")...{//alert(t.innerHTML);
document.getElementById(m).value=t.msg;
t.className="TdOver";
document.getElementById("DateGird").style.display="none";
}
}
}
}
function cmGetX (obj) ... {var x = 0;do...{x += obj.offsetLeft;obj = obj.offsetParent;}while(obj);return x;}
function cmGetY (obj) ... {var y = 0;do...{y += obj.offsetTop;obj = obj.offsetParent;}while(obj);return y;}
</ script >
</ head >
< body >
开始时间: < input name = " number4 " type = " text " id = " number4 " onfocus = " datelist.dfd(this) " readOnly >
结束时间: < input name = " ddd3 " type = " text " id = " ddd3 " onfocus = " datelist.dfd(this) " readOnly >
</ body >
</ html >
2.例子:
< head >
< script language = " javascript " type = " text/javascript " >
// 日历
var date_start,date_end,g_object
var today = new Date();
var separator = " - " ;
var inover = false ;
// mode :时间变换的类型0-年 1-月 2-直接选择月
function change_date(temp,mode)
... {
var t_month,t_year
if (mode)...{
if(mode==1)
t_month=parseInt(cele_date_month.value,10)+parseInt(temp,10);
else
t_month=parseInt(temp)
if (t_month<cele_date_month.options(0).text) ...{
cele_date_month.value=cele_date_month.options(cele_date_month.length-1).text;
change_date(parseInt(cele_date_year.value,10)-1,0);
}
else...{
if (t_month>cele_date_month.options(cele_date_month.length-1).text)...{
cele_date_month.value=cele_date_month.options(0).text;
change_date(parseInt(cele_date_year.value,10)+1,0);
}
else
...{cele_date_month.value=t_month;
set_cele_date(cele_date_year.value,cele_date_month.value);
}
}
}
else...{
t_year=parseInt(temp,10);
if (t_year<cele_date_year.options(0).text) ...{
cele_date_year.value=cele_date_year.options(0).text;
set_cele_date(cele_date_year.value,1);
}
else...{
if (parseInt(t_year,10)>parseInt(cele_date_year.options(cele_date_year.length-1).text,10))...{
cele_date_year.value=cele_date_year.options(cele_date_year.length-1).text;
set_cele_date(cele_date_year.value,12);
}
else
...{cele_date_year.value=t_year;
set_cele_date(cele_date_year.value,cele_date_month.value);
}
}
}
/**//*********2002-02-01 MODIFY BY WING **************/
window.cele_date.focus();
/**//****************MODIFY END***********************/
}
// 初始化日历
function init(d_start,d_end)
... {
var temp_str;
var i=0
var j=0
date_start=new Date(1980,7,1)
date_end=new Date(2004,8,1)
document.writeln("<div name="cele_date" id="cele_date" style="display:none" style="LEFT: 69px; POSITION: absolute; TOP: 159px;Z-INDEX:99" onClick="event.cancelBubble=true;" onBlur="hilayer()" onMouseout="lostlayerfocus()">-</div>");
window.cele_date.innerHTML="";
temp_str="<table border="1" bgcolor="#DDDDDD" bordercolor="white"><tr><td colspan=7 οnmοuseοver="overcolor(this)">";
temp_str+="<input type="Button" value="<<" οnclick="change_date(-1,1)" οnmοuseοver="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">-";
temp_str+=""
temp_str+="<select name="cele_date_year" id="cele_date_year" language="javascript" οnchange="change_date(this.value,0)" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"
for (i=1900;i<=2020;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>-";
temp_str+=""
temp_str+="<select name="cele_date_month" id="cele_date_month" language="javascript" οnchange="change_date(this.value,2)" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"
for (i=1;i<=12;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>-";
temp_str+=""
temp_str+="<input type="Button" value=">>" οnclick="change_date(1,1)" οnmοuseοver="getlayerfocus()" style="color: #000099; background-color: #BFBFBF; cursor: hand">";
temp_str+="</td></tr><tr><td οnmοuseοver="overcolor(this)">"
temp_str+="<font color=red>日</font></td><td>";temp_str+="一</td><td>"; temp_str+="二</td><td>"; temp_str+="三</td><td>"
temp_str+="四</td><td>";temp_str+="五</td><td>"; temp_str+="六</td></tr>";
for (i=1 ;i<=6 ;i++)
...{
temp_str+="<tr>";
for(j=1;j<=7;j++)...{
temp_str+="<td name="c"+i+"_"+j+""id="c"+i+"_"+j+"" style="CURSOR: hand" style="COLOR:#000000" language="javascript" οnmοuseοver="overcolor(this)" οnmοuseοut="outcolor(this)" οnclick="td_click(this)">?</td>"
}
temp_str+="</tr>"
}
temp_str+="</td></tr>";
temp_str+="<tr><td colspan=7>";
temp_str+="";
temp_str+="<select name="cele_date_hour" id="cele_date_hour" language="javascript" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"
for (i=0;i<24;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>:";
temp_str+="";
temp_str+="";
temp_str+="<select name="cele_date_minute" id="cele_date_minute" language="javascript" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"
for (i=0;i<60;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>:";
temp_str+="";
temp_str+="";
temp_str+="<select name="cele_date_second" id="cele_date_second" language="javascript" οnmοuseοver="getlayerfocus()" οnblur="getlayerfocus()" style="font-size: 9pt; border: 1px #666666 outset; background-color: #F4F8FB">"
for (i=0;i<60;i++)
...{
temp_str+="<OPTION value=""+i.toString()+"">"+i.toString()+"</OPTION>";
}
temp_str+="</select>";
temp_str+="";
temp_str+="</td></tr>";
temp_str+="</table>";
window.cele_date.innerHTML=temp_str;
}
function set_cele_date(year,month)
... {
var i,j,p,k
var nd=new Date(year,month-1,1);
event.cancelBubble=true;
cele_date_year.value=year;
cele_date_month.value=month;
k=nd.getDay()-1
var temp;
for (i=1;i<=6;i++)
for(j=1;j<=7;j++)
...{
eval("c"+i+"_"+j+".innerHTML=""");
eval("c"+i+"_"+j+".bgColor="#DDDDDD"");
eval("c"+i+"_"+j+".style.cursor="hand"");
}
while(month-1==nd.getMonth())
...{ j=(nd.getDay() +1);
p=parseInt((nd.getDate()+k) / 7)+1;
eval("c"+p+"_"+j+".innerHTML="+"""+nd.getDate()+""");
if ((nd.getDate()==today.getDate())&&(cele_date_month.value==today.getMonth()+1)&&(cele_date_year.value==today.getYear()))...{
eval("c"+p+"_"+j+".bgColor="#EFFB64"");
}
if (nd>date_end || nd<date_start)
...{
eval("c"+p+"_"+j+".bgColor="#FF9999"");
eval("c"+p+"_"+j+".style.cursor="text"");
}
nd=new Date(nd.valueOf() + 86400000);
}
}
// s_object:点击的对象;d_start-d_end有效的时间区段;需要存放值的控件;
function show_cele_date(d_start,d_end,t_object)
... {
window.cele_date.style.display="";
window.cele_date.style.zIndex=99;
var s,cur_d
var eT = t_object.offsetTop;
var eH = t_object.offsetHeight+eT;
var dH = window.cele_date.style.pixelHeight;
var sT = document.body.scrollTop;
var sL = document.body.scrollLeft;
event.cancelBubble=true;
window.cele_date.style.posLeft = event.clientX-event.offsetX+sL-5;
window.cele_date.style.posTop = event.clientY-event.offsetY+eH+sT-5;
if (window.cele_date.style.posLeft+window.cele_date.clientWidth>document.body.clientWidth) window.cele_date.style.posLeft+=t_object.offsetWidth-window.cele_date.clientWidth;
if (d_start!="")...{
if (d_start=="today")...{
date_start=new Date(today.getYear(),today.getMonth(),today.getDate());
}else...{
s=d_start.split(separator);
date_start=new Date(s[0],s[1]-1,s[2]);
}
}else...{
date_start=new Date(1900,1,1);
}
if (d_end!="")...{
s=d_end.split(separator);
date_end=new Date(s[0],s[1]-1,s[2]);
}else...{
date_end=new Date(3000,1,1);
}
g_object=t_object
cur_d=new Date()
set_cele_date(cur_d.getYear(),cur_d.getMonth()+1);
window.cele_date.style.display="block";
window.cele_date.focus();
}
function td_click(t_object)
... {
var t_d
if (parseInt(t_object.innerHTML,10)>=1 && parseInt(t_object.innerHTML,10)<=31 )
...{ t_d=new Date(cele_date_year.value,cele_date_month.value-1,t_object.innerHTML)
if (t_d<=date_end && t_d>=date_start)
...{
var year = cele_date_year.value;
var month = cele_date_month.value;
var day = t_object.innerHTML;
if (parseInt(month)<10) month = "0" + month;
if (parseInt(day)<10) day = "0" + day;
var hour = cele_date_hour.value;
if (hour < 10) hour = "0" + hour;
var minute = cele_date_minute.value;
if (minute < 10) minute = "0" + minute;
var second = cele_date_second.value;
if (second < 10) second = "0" + second;
g_object.value=year+separator+month+separator+day+" "+hour+":"+minute+":"+second;
window.cele_date.style.display="none";};
}
}
function h_cele_date()
... {
window.cele_date.style.display="none";
}
function overcolor(obj)
... {
if (obj.style.cursor=="hand") obj.style.color = "#FFFFFF";
inover=true;
window.cele_date.focus();
}
function outcolor(obj)
... {
obj.style.color = "#000000";
inover=false;
}
function getNow(o) ... {
var Stamp=new Date();
var year = Stamp.getYear();
var month = Stamp.getMonth()+1;
var day = Stamp.getDate();
if(month<10)...{
month="0"+month;
}
if(day<10)...{
day="0"+day;
}
o.value=year+separator+month+separator+day;
}
function hilayer()
... {
if (inover==false)
...{
var lay=document.all.cele_date;
lay.style.display="none";
}
}
function getlayerfocus()
... {
inover=true;
}
function lostlayerfocus()
... {
inover=false;
}
init();
// 日历结束
</ script >
</ head >
< body >
< input type = text name = selDate onfocus = " show_cele_date('','',selDate) " >
</ body >
</ html >
"+DateArray[i]+" |