弹出层日历显示当前月和下个月的 咋弄

http://www.mangocity.com/ 机票 出发时间 那个效果

解决方案 »

  1.   

     <li><a class="css_find_a" onClick="change_searchbox(this,1)"><img src="200912/images/touming.gif" border="0" class="allicon  icon18" /> 机票</a></li>
    这段代码是层在加载是的显示，使用的是jquery的技术实现的
      

  2.   

    弄了一个，可以当做练习，剩下的你自己做做吧。<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html;charset=shift-jis">
    <title>sample</title>
    <script type="text/javascript">
    window.onload=function() {
    initDiv("prev");
    initDiv("next");
    };
    function initDiv(id){
    var i=0;
    var p=document.getElementById(id);
    var pa=p.getElementsByTagName("a");
    var dt=new Date(p.getElementsByTagName("span")[0].innerHTML+"/01");
    var ds=dt;

    for(var i=7;i<pa.length;i++){
    pa[i].innerHTML="";
    }
    i=1;
    while(dt.getMonth()==ds.getMonth()){
    pa[6+dt.getDay()+i].innerHTML=ds.getDate();
    ds=new Date(ds.getYear(),ds.getMonth(),ds.getDate()+1);
    i=i+1;
    }

    setDate(pa);

    }
    function setDate(list){
    for(var i=7;i<list.length;i++){
    if(list[i].innerHTML!=""){
    list[i].onclick=function(){
    document.getElementById("txt1").value=
    this.parentNode.getElementsByTagName("span")[0].innerHTML+"/"+this.innerHTML;
    }
    }
    }
    }
    function prevMonth(){
    var p=document.getElementById("prev");
    var n=document.getElementById("next");
    var d=new Date(p.getElementsByTagName("span")[0].innerHTML+"/01")
    d=new Date(d.getYear(),d.getMonth()-1,1);

    n.innerHTML=p.innerHTML;
    var pa=n.getElementsByTagName("a");
    setDate(pa); p.getElementsByTagName("span")[0].innerHTML=d.getYear()+"/"+(d.getMonth()+1)
    initDiv("prev");

    }
    function nextMonth(){
    var p=document.getElementById("prev");
    var n=document.getElementById("next");
    var d=new Date(n.getElementsByTagName("span")[0].innerHTML+"/01")
    d=new Date(d.getYear(),d.getMonth()+1,1);

    p.innerHTML=n.innerHTML;
    var pa=p.getElementsByTagName("a");
    setDate(pa); n.getElementsByTagName("span")[0].innerHTML=d.getYear()+"/"+(d.getMonth()+1)
    initDiv("next");

    }
        </script>
        <style type"text/css">
            span {width:145px;text-align:center;}
            a {background:#DDD;width:24px;text-align:center;cursor:pointer;}
            button {position:absolute;top:20px;}
            div {position:absolute;width:170px;height:140px;background:#EEE; border:1px solid #0ac}
            #prev {left:10px;top:10px;}
            #next {left:180px;top:10px;}
            #txt1 {left:10px;top:160px;position:absolute;}
            #btnPrev {left:10px;top:10px;position:absolute;z-index:1;}
            #btnNext {left:328px;top:10px;position:absolute;z-index:1;}
        </style>
    </head>
    <body>
    <input type=button onclick="prevMonth();"value="<<" id="btnPrev">
    <input type=button onclick="nextMonth();"value=">>" id="btnNext">
    <div id="prev">
    <span>2010/03</span>
    <a>日</a><a>一</a><a>二</a><a>三</a><a>四</a><a>五</a><a>六</a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    </div>
    <div id="next">
    <span>2010/04</span>
    <a>日</a><a>一</a><a>二</a><a>三</a><a>四</a><a>五</a><a>六</a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    <a></a><a></a><a></a><a></a><a></a><a></a><a></a>
    </div>
    <input type=text id=txt1>
    </body>
    </html>