求高手解答，本人初学，前辈指教

楼主直接去下个框架吧ext jquery都有类似的日期控件~·

搜索 javascript 日期控件有现成的

+1 jquery很多这样的日期插件很方便

// 支持开始-结束日期和中英文2种语言/**
* 格式化日期
* @param   d the delimiter
* @param   p the pattern of your date
* @author meizz
*/
Date.prototype.format = function(format)
{
     var o ={
            'M+' : this.getMonth()+1, //month
            'd+' : this.getDate(),    //day
            'h+' : this.getHours(),   //hour
            's+' : this.getSeconds(), //second
            'm+' : this.getMinutes(), //minute
            'q+' : Math.floor((this.getMonth()+3)/3),  //quarter
            'S' : this.getMilliseconds() //millisecond
        };
       if(/(y+)/.test(format)){format=format.replace(RegExp.$1,(this.getFullYear()+'').substr(4 - RegExp.$1.length));}
      for(var k in o){
             if(new RegExp('('+ k +')').test(format)){format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] : ('00'+ o[k]).substr((''+ o[k]).length));}}
     return format;
};
/**
* 返回日期
* @param d the delimiter
* @param p the pattern of your date
*/
String.prototype.toDate = function(x, p)
{
    if(x == null){ x = '-';}
    if(p == null) {p = 'ymd';}
    var a = this.split(x);
    var y = parseInt(a[p.indexOf('y')]);
    //remember to change this next century ;)
    if(y.toString().length <= 2) {y += 2000;}
    if(isNaN(y)){ y = new Date().getFullYear();}

    var m = parseToInt(a[p.indexOf('m')]) - 1;
    var d = parseToInt(a[p.indexOf('d')]);
    if(isNaN(d)){ d = 1;}
    return new Date(y, m, d);
};function  parseToInt(str)
{
    if(str.indexOf('0') == 0)
    {
        str = str.substr(1);
    }
    return parseInt(str);
};
/**
* 日历类
* @param   beginYear 1990
* @param   endYear   2010
* @param   lang      0(中文)|1(英语) 可自由扩充
* @param   dateFormatStyle 'yyyy-MM-dd";
* @version 2006-04-01
* @author KimSoft (jinqinghua [at] gmail.com)
* @update
*/
function Calendar(beginYear, endYear, lang, dateFormatStyle)
{
    this.beginYear = 1990;
    this.endYear = 2200;
    this.lang = 0;            //0(中文) | 1(英文)
    this.dateFormatStyle = 'yyyy-MM-dd';
    if (beginYear != null && endYear != null)
    {
        this.beginYear = beginYear;
        this.endYear = endYear;
    }
    if (lang != null)
    {
        this.lang = lang;
    }    if (dateFormatStyle != null)
    {
        this.dateFormatStyle = dateFormatStyle;
    }    this.dateControl = null;
    this.panel = this.getElementById('calendarPanel');
    this.form = null;    this.date = new Date();
    this.year = this.date.getFullYear();
    this.month = this.date.getMonth();
    this.colors =
        {
            'cur_word'      : '#FFFFFF', //当日日期文字颜色
            'cur_bg'        : '#00FF00', //当日日期单元格背影色
            'sun_word'      : '#FF0000', //星期天文字颜色
            'sat_word'      : '#0000FF', //星期六文字颜色
            'td_word_light' : '#333333', //单元格文字颜色
            'td_word_dark' : '#CCCCCC', //单元格文字暗色
            'td_bg_out'     : '#EFEFEF', //单元格背影色
            'td_bg_over'    : '#FFCC00', //单元格背影色
            'tr_word'       : '#FFFFFF', //日历头文字颜色
            'tr_bg'         : '#666666', //日历头背影色
            'input_border' : '#CCCCCC', //input控件的边框颜色
            'input_bg'      : '#EFEFEF'   //input控件的背影色        };    this.draw();
    this.bindYear();
    this.bindMonth();
    this.changeSelect();
    this.bindData();
}
/**
* 日历类属性（语言包，可自由扩展）
*/
Calendar.language =
    {
        'year'   : [[''], ['']],
        'months' : [['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
                ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC']
                 ],
        'weeks' : [['日','一','二','三','四','五','六'],
                ['SUN','MON','TUR','WED','THU','FRI','SAT']
                 ],
        'clear' : [['清空'], ['CLS']],
        'today' : [['今天'], ['TODAY']],
        'close' : [['关闭'], ['CLOSE']]
    };
Calendar.prototype.draw = function()
{
    calendar = this;    var mvAry = [];
    mvAry[mvAry.length] = " <form name=\'calendarForm\' style='margin: 0px;'>";
    mvAry[mvAry.length] ="    <table width='100%' border='0' cellpadding='0' cellspacing='1'>";
    mvAry[mvAry.length] ="      <tr>";
    mvAry[mvAry.length] ="        <th align='left' width='1%'><input style='border: 1px solid " + calendar.colors['input_border'] + ";background-color:" + calendar.colors['input_bg'] + ";width:16px;height:20px;' name='prevMonth' type='button' id='prevMonth' value='<' /></th>";
    mvAry[mvAry.length] ="        <th align='center' width='98%' nowrap='nowrap'><select name='calendarYear' id='calendarYear' style='font-size:12px;'></select><select name='calendarMonth' id='calendarMonth' style='font-size:12px;'></select></th>";
    mvAry[mvAry.length] ="        <th align='right' width='1%'><input style='border: 1px solid "+ calendar.colors['input_border'] + ";background-color:"+ calendar.colors['input_bg'] + ";width:16px;height:20px;' name='nextMonth' type='button' id='nextMonth' value='>' /></th>";
    mvAry[mvAry.length] ="      </tr>";
    mvAry[mvAry.length] ="    </table>";
    mvAry[mvAry.length] ="    <table id='calendarTable' width='100%' style='border:0px solid #CCCCCC;background-color:#FFFFFF' border='0' cellpadding='3' cellspacing='1'>";
    mvAry[mvAry.length] ="      <tr>";
    for(var i = 0; i < 7; i++)
    {
        mvAry[mvAry.length] ="      <th style='font-weight:normal;background-color:"+ calendar.colors['tr_bg'] + ";color:"+ calendar.colors['tr_word'] + ";'>"+ Calendar.language['weeks'][this.lang][i] + "</th>";
    }
    mvAry[mvAry.length] ="      </tr>";
    for(var i = 0; i < 6;i++)
    {
        mvAry[mvAry.length] ="    <tr align='center'>";
        for(var j = 0; j < 7; j++)
        {
              if (j == 0)
              {
                mvAry[mvAry.length] =" <td style='cursor:default;color:"+ calendar.colors['sun_word'] + ";'></td>";
              } else if(j == 6)
              {
                mvAry[mvAry.length] =" <td style='cursor:default;color:"+ calendar.colors['sat_word'] + ";'></td>";
              }
              else
              {
                mvAry[mvAry.length] =" <td style='cursor:default;'></td>";
              }
        }
        mvAry[mvAry.length] ="    </tr>";
    }
    mvAry[mvAry.length] ="      <tr style='background-color:" + calendar.colors['input_bg'] + ";'>";
    mvAry[mvAry.length] ="        <th colspan='2'><input name='calendarClear' type='button' id='calendarClear' value='"+ Calendar.language['clear'][this.lang] + "' style='border: 1px solid "+ calendar.colors['input_border'] + ";background-color:"+ calendar.colors['input_bg'] + ";width:100%;height:20px;font-size:12px;'/></th>";
    mvAry[mvAry.length] ="        <th colspan='3'><input name='calendarToday' type='button' id='calendarToday' value='"+ Calendar.language['today'][this.lang] + "' style='border: 1px solid "+ calendar.colors['input_border'] + ";background-color:"+ calendar.colors['input_bg'] + ";width:100%;height:20px;font-size:12px;'/></th>";
    mvAry[mvAry.length] ="        <th colspan='2'><input name='calendarClose' type='button' id='calendarClose' value='"+ Calendar.language['close'][this.lang] + "' style='border: 1px solid "+ calendar.colors['input_border'] + ";background-color:"+ calendar.colors['input_bg'] + ";width:100%;height:20px;font-size:12px;'/></th>";
    mvAry[mvAry.length] ="      </tr>";
    mvAry[mvAry.length] ="    </table>";
    mvAry[mvAry.length] =" </form>";
    if(this.panel != 'undefined')
    {
        this.panel.innerHTML = mvAry.join('');
    }
    this.form = document.forms['calendarForm'];
    if(this.form == 'undefined'){ return;}
    this.form.prevMonth.onclick = function () {calendar.goPrevMonth(this);};
    this.form.nextMonth.onclick = function () {calendar.goNextMonth(this);};
    this.form.calendarClear.onclick = function () {calendar.dateControl.value = '';calendar.hide();};
    this.form.calendarClose.onclick = function () {calendar.hide();};
    this.form.calendarYear.onchange = function () {calendar.update(this);};
    this.form.calendarMonth.onchange = function () {calendar.update(this);};
    this.form.calendarToday.onclick = function ()
    {
        var today = new Date();
        calendar.date = today;
        calendar.year = today.getFullYear();
        calendar.month = today.getMonth();
        calendar.changeSelect();
        calendar.bindData();
        calendar.dateControl.value = today.format(calendar.dateFormatStyle);
        calendar.hide();
    };};未完

/年份下拉框绑定数据
Calendar.prototype.bindYear = function()
{
    if(this.form == 'undefined'){ return;}
    var cy = this.form.calendarYear;
    cy.length = 0;
    for (var i = this.beginYear; i <= this.endYear; i++)
    {
        cy.options[cy.length] = new Option(i + Calendar.language['year'][this.lang], i);
    }
};//月份下拉框绑定数据
Calendar.prototype.bindMonth = function()
{
    if(this.form == 'undefined'){ return;}
    var cm = this.form.calendarMonth;
    cm.length = 0;
    for (var i = 0; i < 12; i++)
    {
        cm.options[cm.length] = new Option(Calendar.language['months'][this.lang][i], i);
    }
};//向前一月
Calendar.prototype.goPrevMonth = function(e)
{
    if (this.year == this.beginYear && this.month == 0){return;}
    this.month--;
    if (this.month == -1)
    {
        this.year--;
        this.month = 11;
    }
    this.date = new Date(this.year, this.month, 1);
    this.changeSelect();
    this.bindData();
};//向后一月
Calendar.prototype.goNextMonth = function(e)
{
    if (this.year == this.endYear && this.month == 11){return;}
    this.month++;
    if (this.month == 12)
    {
        this.year++;
        this.month = 0;
    }
    this.date = new Date(this.year, this.month, 1);
    this.changeSelect();
    this.bindData();
};//改变SELECT选中状态
Calendar.prototype.changeSelect = function()
{
    if(this.form == undefined){return;}
    var cy = this.form.calendarYear;
    var cm = this.form.calendarMonth;
    for (var i= 0; i < cy.length; i++)
    {
        if (cy.options[i].value == this.date.getFullYear())
        {
          cy[i].selected = true;
          break;
        }
    }
    for (var i= 0; i < cm.length; i++)
    {
        if (cm.options[i].value == this.date.getMonth())
        {
            cm[i].selected = true;
            break;
        }
    }
};//更新年、月
Calendar.prototype.update = function (e)
{
    this.year = e.form.calendarYear.options[e.form.calendarYear.selectedIndex].value;
    this.month = e.form.calendarMonth.options[e.form.calendarMonth.selectedIndex].value;
    this.date = new Date(this.year, this.month, 1);
    this.changeSelect();
    this.bindData();
};//绑定数据到月视图
Calendar.prototype.bindData = function ()
{
    if(this.panel == undefined){ return ;}
    var calendar = this;
    var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth());
    var tds = this.getElementById('calendarTable').getElementsByTagName('td');
    for(var i = 0; i < tds.length; i++)
    {
        //tds[i].style.color = calendar.colors['td_word_light'];
        tds[i].style.backgroundColor = calendar.colors['td_bg_out'];
        tds[i].onclick = function () {return;};
        tds[i].onmouseover = function () {return;};
        tds[i].onmouseout = function () {return;};
        if (i > dateArray.length - 1){ break;}
        tds[i].innerHTML = dateArray[i];
        if (dateArray[i] != ' ')
        {
              tds[i].onclick = function ()
                {
                    if (calendar.dateControl != null)
                    {
                      calendar.dateControl.value = new Date(calendar.date.getFullYear(),calendar.date.getMonth(),this.innerHTML).format(calendar.dateFormatStyle);
                    }
                    calendar.hide();
                };
              tds[i].onmouseover = function ()
              {
                this.style.backgroundColor = calendar.colors['td_bg_over'];
              };
              tds[i].onmouseout = function ()
              {
                this.style.backgroundColor = calendar.colors['td_bg_out'];
              };
              if (new Date().format(calendar.dateFormatStyle) ==
                  new Date(calendar.date.getFullYear(),
                           calendar.date.getMonth(),
                           dateArray[i]).format(calendar.dateFormatStyle))
                {
                    //tds[i].style.color = calendar.colors['cur_word'];
                    tds[i].style.backgroundColor = calendar.colors['cur_bg'];
                    tds[i].onmouseover = function ()
                    {
                      this.style.backgroundColor = calendar.colors['td_bg_over'];
                    };
                    tds[i].onmouseout = function ()
                    {
                      this.style.backgroundColor = calendar.colors['cur_bg'];
                    };
                }//end if
            }
    }
};//根据年、月得到月视图数据(数组形式)
Calendar.prototype.getMonthViewArray = function (y, m)
{
    var mvArray = [];
    var dayOfFirstDay = new Date(y, m, 1).getDay();
    var daysOfMonth = new Date(y, m + 1, 0).getDate();
    for (var i = 0; i < 42; i++)
    {
        mvArray[i] = ' ';
    }
    for (var i = 0; i < daysOfMonth; i++)
    {
        mvArray[i + dayOfFirstDay] = i + 1;
    }
    return mvArray;
};//扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source
Calendar.prototype.getElementById = function(id)
{
    if (typeof(id) != 'string' || id == '') {return null;}
    if (document.getElementById){ return document.getElementById(id);}
    if (document.all){ return document.all(id);}
    try {return eval(id);} catch(e){ return null;}
};//扩展 object.getElementsByTagName(tagName)
Calendar.prototype.getElementsByTagName = function(object, tagName)
{
    if (document.getElementsByTagName) {return document.getElementsByTagName(tagName);}
    if (document.all){ return document.all.tags(tagName);}
};//取得HTML控件绝对位置
Calendar.prototype.getAbsPoint = function (e)
{
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while(e = e.offsetParent)
    {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    return {'x': x, 'y': y};
};//显示日历
Calendar.prototype.show = function (dateControl, popControl)
{
    if (dateControl == null)
    {
        throw new Error('arguments[0] is necessary');
    }
    this.dateControl = dateControl;

    if (dateControl.value.length > 0)
    {
        this.date = dateControl.value.toDate();
        this.year = this.date.getFullYear();
        this.month = this.date.getMonth();
        this.changeSelect();
        this.bindData();
    }
    if (popControl == null)
    {
        popControl = dateControl;
    }
    var xy = this.getAbsPoint(popControl);
    this.panel.style.left = xy.x + 'px';
    this.panel.style.top = (xy.y + dateControl.offsetHeight) + 'px';
    this.setDisplayStyle('select', 'hidden');
    this.panel.style.visibility = 'visible';
};//隐藏日历
Calendar.prototype.hide = function()
{
    this.setDisplayStyle('select', 'visible');
    this.panel.style.visibility = 'hidden';
};//设置控件显示或隐藏
Calendar.prototype.setDisplayStyle = function(tagName, style)
{
    var tags = this.getElementsByTagName(null, tagName);
    for(var i = 0; i < tags.length; i++)
    {
        if (tagName.toLowerCase() == 'select' &&(tags[i].name == 'calendarYear' ||tags[i].name == 'calendarMonth'))
        {
          continue;
        }
        tags[i].style.visibility = style;
    }
};document.write("<div id='calendarPanel' style='position: absolute;visibility: hidden;z-index: 9999;background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;'></div>");
//var calendar = new Calendar();
//调用calendar.show(dateControl, popControl);
//-->
//  <input onclick='new Calendar().show(this)'/>

//set max date(yyyy/MM/dd[ hh:mm[:ss]])
MzCalendar.prototype.setMax   = function(datestr)
{
  var n = Date.parse(datestr);
  if(!isNaN(n) && n > this.min) this.max = n;
  else alert(datestr +" isn't Date String![setMax method]");
}
//fill in year div layer
MzCalendar.prototype.fillYear = function()
{
  this.curYear = this.datetime.getFullYear();
  var div = this.elements["divYear"];
  var n   = Math.floor(this.yearSpan/2);
  var min = new Date(this.min).getFullYear();
  if(this.curYear - n > min) min = this.curYear - n;
  var max = new Date(this.max).getFullYear();
  if (min + this.yearSpan < max) max = min + this.yearSpan;  if(div.childNodes.length > 0)
  {
    var n = div.childNodes.length;
    for(var i=min; i<=max && i-min<n; i++)
    {
      var dc = div.childNodes[i-min];
      dc.innerHTML = i +" 年";
      dc.className = "";
      if(i==this.curYear)
      {
        try
        {
          this.elements["divYear"].style.top = -1;
          dc.scrollIntoView(true);
          this.elements["divYear"].style.top = 3;
        }catch(e){}
        dc.className = "selected";
      }
    }
  }
  else
  {
    var str = "";
    for(var i=min; i<=max; i++)
    {
      str += "<div align='right' style='padding-right: 1px' onclick='parent."+ this.id +
        ".selYearChange(this)' onmouseover='this.style.backgroundColor=parent."+ this.id +
        ".colors[\"dark\"]; this.style.color=parent."+ this.id +".colors[\"light\"]' "+
        "onmouseout='style.backgroundColor=style.color=\"\"'>"+ i +" 年</div>";
    }
    div.innerHTML = str;
  }
};
MzCalendar.prototype.fillMonth = function()
{
  this.curMonth = this.datetime.getMonth();
  var div = this.elements["divMonth"];
  if(div.childNodes.length > 0)
  {
    for(var i=div.childNodes.length - 1; i>=0; i--)
      div.childNodes[i].className = "";
    div.childNodes[this.curMonth].className = "selected";
  }
  else
  {
    var str = "";
    for(var i=1; i<13; i++)
    {
      str += "<div align='right' style='padding-right: 3px' onclick='parent."+ this.id +
        ".selMonthChange(this)' onmouseover='this.style.backgroundColor=parent."+ this.id +
        ".colors[\"dark\"]; this.style.color=parent."+ this.id +".colors[\"light\"]' "+
        "onmouseout='style.backgroundColor=style.color=\"\"'>"+
        ("00"+i).substr((i+"").length) +" 月</div>";
    }
    div.innerHTML = str;
  }
}
MzCalendar.prototype.InitHTML   = function()
{
  var BK = /(MSIE)|(Netscape)/i.test(window.navigator.userAgent);
  var PM = (BK ? " value='3' style='font-family: Webdings' " : " value='<' ");
  var NM = (BK ? " value='4' style='font-family: Webdings' " : " value='>' ");
  var PY = (BK ? " value='7' style='font-family: Webdings' " : " value='<<' ");
  var NY = (BK ? " value='8' style='font-family: Webdings' " : " value='>>' ");
  var s  = "", id = this.id;   //Base HTML  s += "<form name='meizz'>"+
    "<div id='divYear'  class='layer' style='z-index: 2; left: 22; width: 66;"+
    " height: 140; display: none; overflow: auto'></div>"+
    "<div id='divMonth' class='layer' style='z-index: 2; left: 84; width: 38;"+
    " height: 170; display: none'></div>"+
    "<div id='areaYear'  align='right' class='layer'"+
    " title='点击快速选择年份'"+
    " style='cursor: hand; left: 22; width: 64; height: 18; padding-top: 2'"+
    " onmouseout='style.backgroundColor=style.color=\"\"'></div>"+
    "<div id='areaMonth' align='right' class='layer'"+
    " title='点击快速选择月份'"+
    " style='cursor: hand; left: 86; width: 36; height: 18; padding: 2 3 0 0'"+
    " onmouseout='style.backgroundColor=style.color=\"\"'></div>";  s += "<table id='tabMain' border='0' cellpadding='0' cellspacing='2' width='140'>"+
    "<tr><td height='18'>"+
    " <table id='tabHead' width='140' border='0' cellspacing='1' cellpadding='0'>"+
    " <tr align='right'><td width='18'><input type='button' name='btPrevMonthHead' "+
    "onclick='parent."+ id +".prevMonth()' "+ PM +" onfocus='this.blur()' "+
    "title='向前翻一月'></td>"+
    " <td width='100' height='18'></td><td width='18'><input type='button' "+
    "title='向后翻一月' name='btNextMonthHead' "+
    "onclick='parent."+ id +".nextMonth()' onfocus='blur()' "+ NM +">"+
    "</td></tr></table></td></tr>";  s += "<tr><td height='18'><table width='140' height='18' "+
    "id='tabWeek' cellpadding='0' border='0' cellspacing='0'><tr align=center>"+
    "<td>日</td><td>一</td><td>二</td><td>三</td>"+
    "<td>四</td><td>五</td><td>六</td></tr></table></td></tr>";  s += "<tr><td height='120' id='areaDay'><table border='0' "+
    "id='tabDay' height='120' width='140' cellspacing='1' cellpadding='0'>";
  for(var i=0; i<5; i++)
  {
    s += "<tr>";
    for(var y=0; y<7; y++) s += "<td class='day'></td>";
    s += "</tr>";
  }
  s += "<tr>"; for(var i=0; i<5; i++) s += "<td class='day'></td>";
  s += "<td colspan=2 title='"+ "regInfo" +"' align='right'><input type='button' "+
    "name='btClose' style='padding-top: 2px; width: 38; height: 19' "+
    "onclick='parent."+ id +".hide()' value='关 闭' tabindex='1'>"+
    "</td></tr></table></td></tr>";  s += "<tr><td height='18'>"+
    "<table id='tabBtn' border='0' width='100%' cellpadding='0' cellspacing='1'><tr>"+
    "  <td  width='18'><input type='button' onfocus='this.blur()' "+
    "name='btPrevYear' onclick='parent."+ id +".prevYear()' "+ PY +
    "  title='向前翻一年'></td>"+
    "  <td  width='18'><input type='button' onfocus='this.blur()' "+
    "name='btPrevMonth' onclick='parent."+ id +".prevMonth()' "+ PM +
    "  title='向前翻一月'></td>"+
    "  <td height='18' width='64'><input type='button' onfocus='this.blur()' "+
    "name='btToday' value='今 天' onclick='parent."+ id +
    ".returnDate()' style='padding-top: 2px; width: 100%'></td>"+
    "  <td  width='18'><input type='button' onfocus='this.blur()' "+
    "name='btNextMonth' onclick='parent."+ id +".nextMonth()' "+ NM +
    "  title='向后翻一月'></td>"+
    "  <td  width='18'><input type='button' onfocus='this.blur()' "+
    "name='btNextYear'  onclick='parent."+ id +".nextYear()' "+ NY +
    "  title='向后翻一年'></td></tr>"+
    "</table></td></tr></table></form>";
  if(!this.usePopup)
  {
    s="<html><head><meta http-equiv='Content-Type' content='text/html; charset=gb2312'>"+
      "\r\n<style type='text/css'>INPUT, SELECT, TD, DIV"+
      "{font-size: 9pt; cursor: default; font-family: "+ this.chinese["song"] +"}"+
      "INPUT{border: 0px; height: 18; width: 18; cursor: hand}"+
      "TD.day{font-weight: bold; height: 19}"+
      "TD.day DIV{height: 15; padding-top: 2px}"+
      ".layer{position: absolute; z-index: 1; top: 3}"+
      ".selected{background-color: #0A246A; color: #FFFFFF}</style>\r\n"+
      "<script language='javascript'><\/script></head>"+
      "<body style='margin:0; border:0'>"+ s +"</body></html>";
  }
  return s;
};
//set calendar color
MzCalendar.prototype.setColor   = function(color)
{
  if(typeof(color)=="object")
    for (var i in color)
      this.colors[i] = color[i];
  var tabs = this.elements["table"];
  this.object.document.body.style.backgroundColor = this.colors["dark"];
  with(tabs["week"].style)
  {
    borderTop = borderLeft = "1px solid "+ this.colors["dark"];
    borderRight = borderBottom = "1px solid "+ this.colors["light"];
  }
  for(var i=tabs["week"].rows[0].cells.length-1; i>=0; i--)
  {
    var td = tabs["week"].rows[0].cells[i].style;
    td.color =  this.colors["light"];
    td.paddingTop = "2px";
    td.borderTop = td.borderLeft = "1px solid "+ this.colors["light"];
    td.borderRight = td.borderBottom = "1px solid "+ this.colors["dark"];
  }

for (var i in this.elements["button"])
  {
    var button = this.elements["button"][i].style;
    button.color = this.colors["light"];
    button.backgroundColor = this.colors["dark"];
  }
  tabs["head"].style.backgroundColor = this.colors["light"];
  tabs["button"].style.backgroundColor = this.colors["light"];
  tabs["day"].style.backgroundColor = this.colors["dayBgColor"];
  for (var i=this.elements["days"].length-1; i>=0; i--)
  {
    var td = this.elements["days"][i].style;
    td.borderTop = td.borderLeft = "1px solid "+ this.colors["borderDark"];
    td.borderRight = td.borderBottom = "1px solid "+ this.colors["light"];
  }
  this.elements["divYear"].style.backgroundColor  = this.colors["light"];
  this.elements["divMonth"].style.backgroundColor = this.colors["light"];
  this.elements["divYear"].style.border  = "1px solid "+ this.colors["dark"];
  this.elements["divMonth"].style.border = "1px solid "+ this.colors["dark"];
};
//Object.attachEvent extend
function AttachEvent(object, eventName, Function, cancelBubble)
{
  var cb=cancelBubble?true:false;eventName=eventName.toLowerCase();
  if(document.attachEvent) object.attachEvent(eventName, Function);
  else object.addEventListener(eventName.substr(2), Function,  cb);
};
//get calendar children element
MzCalendar.prototype.setElement   = function()
{
  this.iframe = GetElementById("MzCalendarIframe");
  var doc = this.object.document;
  var tabs= this.elements["table"];
  var btns= this.elements["button"];
  var form= doc.forms["meizz"];
  if (this.usePopup)
  {
    var tds = doc.all.tabDay.getElementsByTagName("TD");
    tabs["main"] = doc.all.tabMain;
    tabs["head"] = doc.all.tabHead;
    tabs["week"] = doc.all.tabWeek;
    tabs["day"]  = doc.all.tabDay;
    tabs["button"] = doc.all.tabBtn;
    this.elements["year"] = doc.all.areaYear;
    this.elements["month"] = doc.all.areaMonth;
    this.elements["divYear"] = doc.all.divYear;
    this.elements["divMonth"] = doc.all.divMonth;
  }
  else
  {
    var tds = this.object.get("tabDay").getElementsByTagName("TD");
    tabs["main"] = this.object.get("tabMain");
    tabs["head"] = this.object.get("tabHead");
    tabs["week"] = this.object.get("tabWeek");
    tabs["day"]  = this.object.get("tabDay");
    tabs["button"] = this.object.get("tabBtn");
    this.elements["year"] = this.object.get("areaYear");
    this.elements["month"] = this.object.get("areaMonth");
    this.elements["divYear"] = this.object.get("divYear");
    this.elements["divMonth"] = this.object.get("divMonth");
    AttachEvent(document, "onclick", function(e)
    {
      e = e || window.event;  var element = e.target || e.srcElement;
      var height = parseInt(WebCalendar.iframe.style.height, 10);
      if(height>0 && WebCalendar.binder!=element) WebCalendar.hide();
    });
    try
    {
      AttachEvent(window, "onresize", function(){WebCalendar.hide();});
      AttachEvent(window, "onscroll", function(){WebCalendar.hide();});
    }
    catch(e){}
  }
  this.fillYear();
  this.fillMonth();
  var me = this;
  tabs["main"].onclick = function()
  {
    me.elements["divYear"].style.display  = "none";
    me.elements["divMonth"].style.display = "none";
  }
  this.elements["year"].onclick = function()
  {
    me.elements["divYear"].style.display  = "";
    me.elements["divMonth"].style.display = "none";
    WebCalendar.fillYear();
  }
  this.elements["month"].onclick = function()
  {
    me.elements["divYear"].style.display  = "none";
    me.elements["divMonth"].style.display = "";
    WebCalendar.fillMonth();
  }
  for(var i=0; i<40; i++)
  {
    this.elements["days"][i] = tds[i];
    tds[i].onmouseover = function()
    {
      this.style.backgroundColor = WebCalendar.colors["dark"];
      this.style.color = WebCalendar.colors["light"];
    }
    tds[i].onmouseout = function()
    {
      this.style.backgroundColor = this.style.color = "";
    }
    this.elements["days"][i].innerHTML = (i+1);
  }
  btns["PMH"] = form.btPrevMonthHead;
  btns["NMH"] = form.btNextMonthHead;
  btns["PY"]  = form.btPrevYear;
  btns["PM"]  = form.btPrevMonth;
  btns["NM"]  = form.btNextMonth;
  btns["NY"]  = form.btNextYear;
  btns["today"] = form.btToday;
  btns["close"] = form.btClose;
  this.elements["year"].onmouseover = function()
  {
    this.style.backgroundColor = WebCalendar.colors["dark"];
    this.style.color = WebCalendar.colors["light"];
  }
  this.elements["month"].onmouseover = function()
  {
    this.style.backgroundColor = WebCalendar.colors["dark"];
    this.style.color = WebCalendar.colors["light"];
  }
  this.setColor(null);
};
//calendar starting
MzCalendar.prototype.start = function(binder, target, format)
{
  if(arguments.length==0 || typeof(binder)!="object")
  {
    try{this.binder = this.target = event.srcElement;}
    catch(e){alert("parameter is wrong!"); return false;}
  }
  else
  {
    if(target)
    {
      if(typeof(target)=="object")this.target = target;
      else if(typeof(target)=="string"){this.format = target; this.target = binder;}
    }
    else this.target = binder;
    if (format && typeof(format)=="string") this.format = format;
    if (binder && typeof(binder)=="object") this.binder = binder;
  }
  this.datetime = new Date(); this.inputdatetime = null;
  if(this.target && this.target.value && /[^\s\x09]/.test(this.target.value))
  {
    var value = this.target.value.replace(/(^[\s\x09　]*)|([　\x09\s]*$)/, "");
    if(!isNaN(Date.parse(value)))
    {
      this.datetime      = new Date(Date.parse(value));
      this.inputdatetime = new Date(Date.parse(value));
    }
    else if(value != "")
    {
      var r1 = /^(\d{2,4})\D?(\d{1,2})\D?(\d{1,2})\D?$/;
      var r2 = /^(\d{1,2})\D?(\d{1,2})\D?(\d{2,4})\D?$/, str = "";
      var r3 = /^(\d{2,4})\D?(\d{1,2})\D?(\d{1,2})\D?(\d{1,2})\D?(\d{1,2})\D?(\d{1,2})?\D?$/;
      if(r1.test(value)) str = RegExp.$1 +"/"+ RegExp.$2 +"/"+ RegExp.$3;
      else if(r2.test(value)) str = RegExp.$3 +"/"+ RegExp.$1 +"/"+ RegExp.$2;
      else if(r3.test(value)) str = RegExp.$1 +"/"+ RegExp.$2 +"/"+ RegExp.$3
        +" "+ RegExp.$4 +":"+ RegExp.$5 +":"+ RegExp.$6;
      if(!isNaN(Date.parse(str)))
      {
        this.datetime      = new Date(Date.parse(str));
        this.inputdatetime = new Date(Date.parse(str));
      }
    }
  }  if(typeof(this.elements["body"])=="undefined")
  {
    this.elements["body"] = this.object.document;
    this.setElement();
  }
  this.show(this.binder);
};window.WebCalendar = new MzCalendar("WebCalendar");
页面上用：
<script type="text/javascript" src="js/MzCalendar.js"></script>
<input onclick="window.WebCalendar.start(this,'yyyy-MM-dd')" name="birth">

调试易

求高手解答，本人初学，前辈指教

解决方案 »