javascript实现如下效果

请各位大哥大姐帮帮忙，用javascript实现如下效果
效果1：
其中开始时间和结束时间都是可以跨年的（即不一定是同一年时间，可以是任意时间）如，开始时间是2009-10-06，结束时间是2011-10-28，然后点击生成，就生成如下的日历，其中选择框只有从开始日期到结束日期可以选择，在开始日期前和结束日期后的选择框只显示出来，不能进行选择，效果如图效果2：
图如下：其效果和上面的差不多，略有差别的是，每次只显示2个月的（如果开始时间和结束时间间隔大于2个月），然后点击左三角符号，显示前两个月，直到开始日期那个月，且左三角不可用，点击右三角同理，请大家小弟写出具体demo,和代码注释，感激不尽
可能作业还是比较麻烦，系统限制小弟只能给100分，所以请大家原谅

解决方案 »

  1.   

    网上有很多日历控件,下面就是一个,拿来改改就可以了<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta http-equiv="Content-Language" content="zh-CN">
    <script type="text/javascript">
    var Calendar = function (obj)
    {
    var o = this;
    var nowIs = new Date();
    var yy = nowYear = nowIs.getFullYear();
    var mm = nowMonth = nowIs.getMonth() + 1;
    var dd = nowDate = nowIs.getDate();
    o.Element = window.document.getElementById(obj);
    o.Element.oldOnfocus = o.Element.onfucus;
    o.Element.oldOnblur = o.Element.onblur;
    if (!o.Element.format) o.Element.format = "yy-mm-dd";
    o.Element.onfocus = function ()
    {
    var y = nowYear, m = nowMonth, d = nowDate, tt;
    var yyreg = new RegExp(this.format.replace("yy","(\\d+)").replace("mm","\\d+").replace("dd","\\d+"));
    var mmreg = new RegExp(this.format.replace("yy","\\d+").replace("mm","(\\d+)").replace("dd","\\d+"));
    var ddreg = new RegExp(this.format.replace("yy","\\d+").replace("mm","\\d+").replace("dd","(\\d+)"));
    if (tt=this.value.match(yyreg)) y = tt[1];
    if (tt=this.value.match(mmreg)) m = tt[1];
    if (tt=this.value.match(ddreg)) d = tt[1];
    o.showDayLists(y,m,d);
    var e = this;
    var x = e.offsetLeft;
    var y=e.offsetTop;
    while(e=e.offsetParent){
    x+=e.offsetLeft;
    y+=e.offsetTop;
    }
    o.DivObject.style.left = x + "px";
    o.DivObject.style.top = y + this.offsetHeight + "px"; o.DivObject.style.display = "block";
    o.Element.oldOnfocus();
    }
    o.getDaysCount = function (yea,mon){return (new Date(yea,mon,0)).getDate();}
    o.getFirstDay = function (yea,mon){return (new Date(yea,mon-1,1)).getDay();}
    o.innerHTMLToTd = function (n,str)
    {
    var tds = o.DivObject.getElementsByTagName("td");
    tds[n+8].innerHTML = str;
    tds[n+8].onclick = (str=="&nbsp;")?null:function ()
    {
    dd = this.innerHTML.replace(/[^\d]/g,"");
    o.Element.value = o.Element.format.replace(/yy/g ,yy).replace(/mm/g ,mm).replace(/dd/g ,dd);
    o.DivObject.style.display = "none";
    };
    }
    o.showDayLists = function (yea,mon,day)
    {
    var ms = o.getDaysCount(yea,mon);
    var fd = o.getFirstDay(yea,mon);
    mon =(""+mon).replace(/^0+/g,"");
    day = (""+day).replace(/^0+/g,""); var sels = o.DivObject.getElementsByTagName("select"); //年月下拉
    sels[0].value = yea;
    sels[1].value = mon;
    //画格子
    for(var i=0;i<42;i++) o.innerHTMLToTd(i,"&nbsp;");
    for(var i=1;i<=ms;i++){
    var TdValue = i
    if (sels[0].value==yea&&sels[1].value==mon&&day==i) TdValue = ("<b><font color=\"green\">"+i+"</font></b>")
    if (nowYear==yea&&nowMonth==mon&&nowDate==i) TdValue = ("<b><font color=\"red\">"+i+"</font></b>")
    o.innerHTMLToTd(i+fd-1,TdValue);
    } sels[0].onchange = function (){o.showDayLists(yy=this.value,mm);}
    sels[1].onchange = function (){o.showDayLists(yy,mm=this.value);}
    }
    o.init = function ()
    {
    var s = "<table cellspacing=\"0\" cellpadding=\"2\" border=\"0\" width=\"200\" height=\"161\" bgcolor=\"#ECF2FC\" style=\"padding: 2px;border: 1px solid #333333;\" >\
    <tr height=\"20\" bgcolor=\"#0A246A\">\
    <td colspan=\"7\">\
    <select style=\"width:70px;\" _DronFw_Calendar=\"true\">";
    for(var i=nowYear-50;i<=nowYear+50;i++)
    s = s.concat("<option" + (i==nowYear?" selected=\"selected\"":"") + " value=\"" +i+ "\">" +i+ "年</option>");
    s = s.concat("</select><select style=\"width:50px;\" _DronFw_Calendar=\"true\">");
    for(var i=1;i<=12;i++)
    s = s.concat("<option" +(i==nowMonth?" selected=\"selected\"":"")+ " value=\"" +i+ "\">" +i+ "月</option>");
    s = s.concat("</select>&nbsp;&nbsp;<a onclick=\"this.parentNode.parentNode.parentNode.parentNode.parentNode.style.display=\'none\'\" style=\"color:#FFFFFF;cursor: hand;\">关闭日历</a>\
    </td>\
    </tr>\
    <tr height=\"20\" align=\"center\">");
    s = s.concat("<td bgcolor=\"#F5F2D8\" width=\"20\">日</td>");
    for(var i=1;i<7;i++)
    s = s.concat("<td width=\"20\" bgcolor=\"#ECF2FC\" >" +"日一二三四五六".charAt(i)+ "</td>");
    s = s.concat("</tr>");
    for(var i=0;i<6;i++)
    {
    s = s.concat("<tr height=\"20\" bgcolor=\"#ECF2FC\" align=\"center\" style=\"cursor: hand;\">\
    <td width=\"20\" bgcolor=\"#F5F2D8\" onmouseover=\"this.style.backgroundColor=\'#ffffff\'\" onmouseout=\"this.style.backgroundColor=\'\'\"></td>");
    for(var j=0;j<5;j++)
    s = s.concat("<td width=\"20\" onmouseover=\"this.style.backgroundColor=\'#ffffff\'\" onmouseout=\"this.style.backgroundColor=\'\'\"></td>");
    s = s.concat("<td width=\"20\" bgcolor=\"#ECF2FC\" onmouseover=\"this.style.backgroundColor=\'#ffffff\'\" onmouseout=\"this.style.backgroundColor=\'\'\"></td>\
    </tr>");
    }
    s = s.concat("</table>");
    o.DivObject = window.document.createElement("div");
    o.DivObject.style.position = "absolute";
    o.DivObject.style.display = "none";
    window.document.body.appendChild(o.DivObject);
    o.DivObject.innerHTML = s;
    }
    o.init();
    }</script>
    <style>
    body,td{font-size:12px;}
    </style>
    </head>
    <body>
    <hr>选择日期：<input type="text" id="abc" value="2005-05-06">
    选择日期：<input type="text" id="abc2" format="mm/dd/yy">（格式为mm/dd/yy）
    选择日期：<input type="text" id="abc3" format="yy年mm月">（其它自定义格式）<script type="text/javascript">
    new Calendar("abc");
    new Calendar("abc2");
    new Calendar("abc3");
    </script></body>
    </html>