写了一个时间组件，哪里需要哪里调（菜鸟级别，大牛路过就Ok了）：
先有一个HTML文件：
<!doctype>
<html>
<head>
<title></title>
<style> </style>
<script src="calendar.js"></script>
<script>
window.onload=function(){
myCalendar("date");
}
</script>
</head>
<body>
<form action="a.html">
<div style="position:relative; left:100px; top:10px;">
买票日期:<input type="text" name="date">
</div> </form>
</body>
</html>
接下来是一个Css样式文件：
*{margin:0px;padding:0px;list-style:none;}
.calendar{width:210px;border:1px solid #000; margin:0 auto;position:absolute;display:none;}
.calendar h3{ height:30px; line-height:30px; text-align:center;}
.calendar ol{ overflow:hidden; border-bottom:1px solid #ccc;}
.calendar ol li{ width:30px; height:30px; line-height:30px; float:left; text-align:center;}
.calendar ul {overflow:hidden;}
.calendar ul li{ width:30px; height:30px; line-height:30px; float:left; text-align:center;font-family:"微软雅黑";font-size:14px;}
.calendar .week{ color:red;}
.calendar .pass{color:#ccc;}
.calendar .today{color:#fff;background:#f60;}
.calendar .prev,.calendar .next{position:absolute; top:10px; text-decoration:none;}
.calendar .prev{ left:10px;}
.calendar .next{ right:10px;}
/*.calendar #h3{font-family:"微软雅黑";font-weight:normal;font-size:16px;}*/
下边是Js文件：
(function(){
function getPos(obj){
var t=0;
var l=0;
while(obj){
t+=obj.offsetTop;
l+=obj.offsetLeft;
obj=obj.offsetParent;
}
return {top:t,left:l};
}
var added=false;//用来判断是否加载边Css文件
window.myCalendar = function(name){
var oInput = document.getElementsByName(name)[0];
var oBox = document.createElement("div");
oBox.className = 'calendar';
oBox.setAttribute('id','calendar');
oInput.onclick = function(ev){
var oEvent = ev || event;
oEvent.cancelBubble = true;
}
oInput.onfocus = function(){
oBox.style.display = 'block';
oBox.style.left = getPos(oInput).left+'px';
oBox.style.top = getPos(oInput).top+oInput.offsetHeight+'px';
}
// var onClicked = oBox.onclick = (function(){return true})();
oBox.innerHTML='<a href="javascript:;" class="prev" id="prevMonty">←</a>'
+'<a href="javascript:;" class="next" id="nextMonty">→</a>'
+'<h3 id="h3">2014年3月</h3> '
+'<ol> '
+'<li>一</li> '
+'<li>二</li> '
+'<li>三</li> '
+'<li>四</li> '
+'<li>五</li> '
+'<li class="week">六</li> '
+'<li class="week">日</li> '
+'</ol> '
+'<ul> '
+'</ul>';
document.body.appendChild(oBox);
/*var oDiv = document.getElementById("calendar");*/
var oUl = oBox.getElementsByTagName("ul")[0];
var oPrev = document.getElementById('prevMonty');
var oNext = document.getElementById("nextMonty");
var oH3 = document.getElementById("h3");
var iNow = 0;
function reFresh(){
oUl.innerHTML = '';//清空Ul
//本月的1号是周几
function getFirstDay(){
var oDate = new Date();
oDate.setMonth(oDate.getMonth()+iNow);
oDate.setDate(1);//将时间设置到本月的1号
return oDate.getDay();
}
var w = getFirstDay();
if(w==0)w=7;//如果是周日，就让它等于7
//创建空白Li
for(var i=0;i<w;i++){
var oLi = document.createElement("li");
oUl.appendChild(oLi);
}
//本月的天数
function getDays(){
var oDate = new Date();
oDate.setDate(1);
oDate.setMonth(oDate.getMonth()+iNow);
oDate.setMonth(oDate.getMonth()+1);//将日期调到下一个月
oDate.setDate(0);//将日期调到上个月的最后一天
return oDate.getDate();
}
var d = getDays();
//创建Li
for(var i=0;i<d;i++){
var oLi = document.createElement("li");
oLi.innerHTML = i+1;
//li点击事件
oLi.onclick = function(){
onClickBox = true;
var oDate = new Date();
oDate.setDate(1);
oDate.setMonth(oDate.getMonth()+iNow);
oInput.value = oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+this.innerHTML;
oBox.style.display = 'none';
}
oUl.appendChild(oLi);
}
//周末变红
for(var i=0;i<oUl.children.length;i++){
if(i%7==0 || i%7==6){
oUl.children[i].className = "week";
}
}
if(iNow < 0){
for(var i=0;i<oUl.children.length;i++){
oUl.children[i].className = 'pass';
}
}else if(iNow > 0){
}else{
//让过去的变灰，当前的高亮
var oDate = new Date();
oDate.setMonth(oDate.getMonth()+iNow);
var today = oDate.getDate();
for(var i=0;i<oUl.children.length;i++){
if(oUl.children[i].innerHTML < today){
oUl.children[i].className = 'pass';
}else if(oUl.children[i].innerHTML == today){
oUl.children[i].className = 'today';
}
}
}
var oDate = new Date();
oDate.setDate(1);
oDate.setMonth(oDate.getMonth()+iNow);
oH3.innerHTML = oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月';
}
reFresh();
oNext.onclick = function(){
iNow++;
reFresh();
}
oPrev.onclick = function(){
iNow--;
reFresh();
}
oBox.onclick = function(ev){
var oEvent = ev || event;
if(window.event){
oEvent.cancelBubble = true;
}else{
oEvent.stopPropagation();
}
}
//css文件加载
if(added)return;
added = true;
var oLink = document.createElement('link');
oLink.rel = "stylesheet";
oLink.href="calendar.css";
oLink.type = "text/css";
var oHead = document.getElementsByTagName('head')[0];
oHead.appendChild(oLink);
}
document.onclick = function(){
var oBox = document.getElementById('calendar');
oBox.style.display = 'none';
}
})();