求一个js月份选择器


<style>
#div1{
position:absolute;
border:1px solid black;
background-color:buttonface;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
var yyyy = (new Date()).getYear()
function realOffset(o)
{
var x = y = 0; do{
x += o.offsetLeft || 0; 
y += o.offsetTop  || 0;
o  = o.offsetParent;}while(o);
return {"x" : x, "y" : y};
}
function show(obj)
{
var div = document.getElementById("div1");
div.style.display="";
var xy = realOffset(document.getElementById('text1'));
div.style.top = xy.y+obj.offsetHeight;
div.style.left= xy.x;
newYear(0);
}
function newYear(n)
{
yyyy +=n;
var str="";
for(var i=1;i<13;i++)
{
str +=  "<span onclick='document.getElementById(\"text1\").value=this.innerHTML;document.getElementById(\"div1\").style.display=\"none\"' style='color:blue'>"+yyyy;
if(i<10)
str += "0"+i+"</span>";
else
str += i+"</span>";
if(i%6==0)
str+="<br>"
else
str+=","
}
str +=  "<span onclick='newYear(-1)' style='color:blue'>上一年</span>&nbsp;&nbsp;<span onclick='newYear(1)' style='color:blue'>下一年</span>";
document.getElementById("div1").innerHTML=str;
}
</SCRIPT>
<input type="text" id="text1" onclick="show(this)" readonly>
<div id=div1 style="display:none"></div>尝试自己简单写一个啊 又不是很难

解决方案 »

  1.   

    看下是不是这个东西
    ms跟时间没关系,年份+月份,没什么计算量...演示地址
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MonthSelector</title>
    <style type="text/css">
    #container{
    background-color:#CCCCCC; padding:5px; border:1px solid #666; width:90px;
    }
    #container ul{
    width:80px;
    background-color:#f1f1f1;
    border:1px solid #ccc;
    padding:0px;
    margin:0px;
    position:absolute;
    margin-left:4px;
    margin-top:-2px;
    }
    #container input{
    width:85px;
    display:block;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-align:center;
    border:1px solid #666;
    }
    #container ul li{
    margin:2px;
    background-color:#eaeaea;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:9pt;
    text-align:center;
    list-style:none;
    padding:3px;
    cursor:pointer;
    }
    #container ul li input{
    width:40%; cursor:pointer; display:inline; border:none; background-color:#fff;
    }
    </style>
    </head><body>
    <div id="container"></div>
    </body>
    <script type="text/javascript">
    var MonthSelector = function(){
    /*
    * Month Selector
    * CSDN.NavyMK
    */
    this._input = document.createElement("input");
    this.container = null;
    this.inputText = document.createElement("input");
    this._shouldBeClosed = true;
    var _this = this;

    this._listPanel = function(){
    var ul = document.createElement("ul")
    var year = new Date().getFullYear();

    var page = document.createElement("li");
    var pre = document.createElement("input");
    pre.type = "button";
    pre.value = "<";
    pre.onclick = function(){
    var items = ul.getElementsByTagName("li");
    for(var i=1; i<items.length; i++){
    items[i].innerHTML = parseInt(items[i].innerHTML) - 100;
    }
    }

    var nex = document.createElement("input")
    nex.type = "button";
    nex.value = ">";
    nex.onclick = function(){
    var items = ul.getElementsByTagName("li");
    for(var i=1; i<items.length; i++){
    items[i].innerHTML = parseInt(items[i].innerHTML) + 100;
    }
    }

    page.appendChild(pre);
    page.appendChild(nex);

    page.onmouseover = function(){
    _this._shouldBeClosed = false;
    }
    page.onmouseout = function(){
    _this._shouldBeClosed = true;
    }

    ul.appendChild(page);

    for(var i=0; i<12; i++){
    var li = document.createElement("li");
    var mStr = "0" + (i + 1);
    li.innerHTML = year + mStr.substr(mStr.length - 2, 2);
    li.onmousedown = function(){
    _this.inputText.value = this.innerHTML;
    ul.style.display = "none";
    }
    ul.appendChild(li);
    }
    ul.style.display = "none";
    return ul;
    }

    this.init = function(container){
    if(!container) alert("请指定容器");
    else{
    var list = this._listPanel();

    this.inputText.onclick = function(){
    if(list.style.display == "none")
    list.style.display = "block";
    else
    list.style.display = "none";
    }
    this.inputText.onblur = function(){
    if(_this._shouldBeClosed)list.style.display = "none";
    }
    container.appendChild(this.inputText);
    container.appendChild(list);
    }
    }
    }
    var sel = new MonthSelector();
    sel.init(document.getElementById("container"));</script>
    </html>
      

  2.   

    演示地址ie7/ff3测试通过