JS日期控件

使用方法：给需要使用的input添加类名：M_time

css部分：

　　

*{ margin:0; padding:0}
#M_time{position:absolute;top:0;left:0; background:#fff;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:0.9;-moz-opacity:0.9;-webkit-opacity:0.9; z-index:1000}
#M_table{ width:200px; table-layout:fixed; font-size:12px; border:#000 solid 1px; }
#M_table tr td{ padding:5px}
#M_table tr td{ text-align:center; vertical-align:middle; cursor:pointer}
#M_table #M_thead tr td{}
#M_table #M_tbody .e3e3e3{ color:#e3e3e3}
#M_table #M_yerclick{position:relative;top:0; left:0;}
#M_table .M_yer_li,#M_table .M_yer_li li{ list-style:none; text-indent:0;}
#M_table .M_yer_li{ display:none; position:absolute;top:15px;left:50%; width:80px;  background:#CCC; margin-left:-40px; border:#999 solid 1px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:0.9;-moz-opacity:0.9;-webkit-opacity:0.9;}
#M_table .M_yer_li li{ font-size:14px; letter-spacing:0.1em;}
#M_table .M_yer_li li.lihover{ background:#333}
#M_table tr td.limouseover{ color:#F00}

javascript部分

var M_obj ={
name:"",
top:0,
left:0
}
var input = document.getElementsByTagName("input");
for(var i = 0 ; i < input.length ; i++)
{
if(input.item(i).className=="M_time")
{

input.item(i).onclick=M_create;
}
}

var date = new Date();
var curentyers = new Date();
var ie = /*@cc_on!@*/!1;
function M_create(event)
{
var th = this;
var event = event? event:window.event;

if(document.getElementById("M_time"))
{
document.body.removeChild(document.getElementById("M_time"));

}
var set_yer,set_mon;
if(arguments.length>1)
{
set_yer = arguments[0];
set_mon = arguments[1];
date = new Date(set_yer,set_mon);
}
//初始化
var datahtml ='<table id="M_table" border="0"><thead id="M_thead"><tr><td><a id="left"><<</a></td><td colspan="5" id="fullyer"><div id="M_yerclick"><span id="M_yy">2012</span>年<span id="M_mm">1</span>月</div></td><td id="right">>></td></tr><tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr></thead><tbody id="M_tbody"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>';
var yer = date.getFullYear();
var mon = date.getMonth();
var week = date.getDay();
var day = date.getDate();
var current = (new Date(yer,mon,1)).getDay();
var div = document.createElement("div");
div.id = "M_time";
div.innerHTML = datahtml;
div.style.top = M_obj.top+"px";
div.style.left = M_obj.left+"px";
div.onmouseout = Mtimemouseover;
document.body.appendChild(div);
document.getElementById("M_yy").innerHTML = yer;
document.getElementById("M_mm").innerHTML = mon+1;

if(th.nodeName&&(th.nodeName).toLowerCase()=="input")
{
M_obj.name = th.name;
var parent = th.offsetParent;
var num = th.offsetTop+th.offsetHeight;
var left = th.offsetLeft;
while(parent)
{
num+= parent.offsetTop;

left+=parent.offsetLeft;
parent = parent.offsetParent;
}
div.style.top=num+"px";
div.style.left = left+"px";
M_obj.top = num;
M_obj.left = left;

}

var run = (yer%4==0)? 29:28;
var cuday = runyue(mon+1);
var prive = runyue(mon+1);
var jl = 1;
var yerul = document.createElement("ol");
yerul.className = "M_yer_li";
yerul.id = "M_yer_li";
yerul.onmouseout = yerulmouseout;
document.getElementById("M_yerclick").appendChild(yerul);
document.getElementById("M_yerclick").onclick = showol;
for(var  o= 0 ; o < 20 ; o ++)
{
var li = document.createElement("li");
li.innerHTML = curentyers.getFullYear() - o;
li.onclick = clickyerli;
li.onmouseover = mouseoverli;
yerul.appendChild(li);
}

document.getElementById("left").onclick = leftclick;
document.getElementById("right").onclick = rightclick;

var M_tbody = document.getElementById("M_tbody").getElementsByTagName("td");

for(var i = -current ; i < M_tbody.length-current ; i ++)
{

M_tbody.item(i+current).onmouseover = li_mouseover;
M_tbody.item(i+current).onclick = li_click;
M_tbody.item(i+current).alt = M_obj.name;

if(i+current<cuday)
{
if(i+current<current)
{

M_tbody.item(i+current).innerHTML = prive - Math.abs(i)+1;
M_tbody.item(i+current).className = "e3e3e3";

}

M_tbody.item(i+current+current).innerHTML = i+current+1;

}else{
if( M_tbody.item(i+current+current))
{
M_tbody.item(i+current+current).innerHTML = jl;
M_tbody.item(i+current+current).className="e3e3e3";
jl++;
}
}

}

M_obj.jl++;

}

//判断月份
function runyue(o)
{
var dd;
switch(o)
{
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:dd = 31;break;
case 2:dd=28;break;
default:dd=30;
}
return dd

}

//年份下拉显示
function showol(event)
{

var event = event? event:window.event;
if(ie)
{
if((event.srcElement.nodeName).toLowerCase() == "li")return;
}else{
if((event.target.nodeName).toLowerCase() == "li")return;
}
document.getElementById("M_yer_li").style.display="block";
}

//年份下拉点击
function clickyerli()
{
document.getElementById("M_yy").innerHTML = this.innerHTML;

hideol();
M_create(parseInt(this.innerHTML),0);//设置年份

}

//年份下拉鼠标掠过
function mouseoverli()
{
var ol = document.getElementById("M_yer_li");
for(var i = 0 ; i < ol.getElementsByTagName("li").length ; i++)
{
ol.getElementsByTagName("li").item(i).className="";
}
this.className="lihover";

}

//年份下拉鼠标掠出
function yerulmouseout(event)
{
var event = event? event:window.event;
var th = this;
if(ie)
{
if(!th.contains(event.toElement))
{
hideol();

}

}else{
if(th.compareDocumentPosition(event.relatedTarget)&16)
{
return;

}else
{
hideol();
}
}

}

//清空年份下拉
function hideol()
{
//th.style.display="none";

var ol = document.getElementById("M_yer_li");
for(var i = 0 ; i < ol.getElementsByTagName("li").length ; i++)
{
ol.getElementsByTagName("li").item(i).className="";
}
ol.style.display="none";
}

//月左
function leftclick()
{
var js = document.getElementById("M_yer_li").getElementsByTagName("li")[document.getElementById("M_yer_li").getElementsByTagName("li").length-1];
var num = parseInt(js.innerHTML);
var curent = document.getElementById("M_mm");
var cu_mm = parseInt(curent.innerHTML);
var cu_y = document.getElementById("M_yy");
var cu_yy = parseInt(cu_y.innerHTML);

if(cu_yy==num&&cu_mm ==1)
{

return
}

cu_mm --;
if(cu_mm <1)
{
cu_mm=12;
curent.innerHTML = 12;
cu_yy--

cu_y.innerHTML = cu_yy;
}
curent.innerHTML = cu_mm;

M_create(parseInt(cu_yy),parseInt(cu_mm)-1);

}

//月右
function rightclick()
{

var curent = document.getElementById("M_mm");
var cu_mm = parseInt(curent.innerHTML);
var cu_y = document.getElementById("M_yy");
var cu_yy = parseInt(cu_y.innerHTML);
var yer = date.getFullYear();
if(cu_yy==curentyers.getFullYear()&&cu_mm==12) return;
cu_mm++;
if(cu_mm>12)
{
cu_mm = 1;
cu_yy++;
cu_y.innerHTML = cu_yy;
}
curent.innerHTML = cu_mm;

M_create(parseInt(cu_yy),parseInt(cu_mm)-1);

}

//td鼠标略入
function li_mouseover()
{
clearclass();
var th = this;
if(th.className=="e3e3e3")
{}else{
th.className="limouseover";
}

}
//td清空
function clearclass()
{
var tdd = document.getElementById("M_tbody").getElementsByTagName("td");
for(var d = 0 ; d < tdd.length; d ++)
{

if(tdd.item(d).className=="e3e3e3")
{

}else{
tdd.item(d).className="";

}

}
}

//添加鼠标掠过外部div
function Mtimemouseover(event)
{
var event = event? event:window.event;
var th = this;
if(ie)
{
if(!th.contains(event.toElement))
{
document.body.removeChild(document.getElementById("M_time"));
};
}else{
if(th.compareDocumentPosition(event.relatedTarget)&16)
{
return
}else{
document.body.removeChild(document.getElementById("M_time"));
};
}
}
//添加div内部table td点击
function li_click()
{
var th = this;

if(this.className=="e3e3e3")
{
return;
}else{
var curent = document.getElementById("M_mm");
var cu_mm = parseInt(curent.innerHTML);
var cu_y = document.getElementById("M_yy");
var cu_yy = parseInt(cu_y.innerHTML);
var num = parseInt(th.innerHTML);

var input = document.getElementsByTagName("input");
for(var i = 0 ; i<input.length ; i++)
{

if(input.item(i).name==th.alt)
{
input.item(i).value = cu_yy+"-"+cu_mm+"-"+num;
document.body.removeChild(document.getElementById("M_time"));
}
// input.item(i).value= cu_yy+"-"+cu_mm+"-"+num;

}

}
}

html部分演示

<body>
<div style="height:200px"></div>
<div style="margin-top:100px; padding-left:300px">
<input type="text" width="100" name="date" height="25" class="M_time" /><br />
<input type="text" width="100" name="date1" height="25" class="M_time" /><br />
<input type="text" width="100" name="date2" height="25" class="M_time" /><br />
<input type="text" width="100" name="date3" height="25" class="M_time" /><br />
<input type="text" width="100" name="date4" height="25" class="M_time" /><br />
<input type="text" width="100" name="date5" height="25" class="M_time" /><br />
<input type="text" width="100" name="date6" height="25" class="M_time" />
</div>

</body>