日期下拉菜单

<! 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=gb2312"   />
< title > 日期下拉菜单 </ title >
< script  type ="text/javascript" > ...
var Class = ...{
  create: function() ...{
    return function() ...{
      this.initialize.apply(this, arguments);
    }
  }
}

Object.extend = function(destination, source) ...{
    for (var property in source) ...{
        destination[property] = source[property];
    }
    return destination;
}

var DateSelector = Class.create();
DateSelector.prototype = ...{
  initialize: function(idYear, idMonth, idDay, options) ...{
    var oYear = document.getElementById(idYear), oMonth = document.getElementById(idMonth), oDay = document.getElementById(idDay), dt = new Date(), i = 0;
    
    this.oYear = oYear; this.oMonth = oMonth; this.oDay = oDay;
    this.date = dt;
    this.SetOptions(options);

    var iYear = parseInt(this.options.year), iMonth = parseInt(this.options.month), iDay = parseInt(this.options.day);
    this.iYear = iYear > 1900 ? iYear : dt.getFullYear() ;
    this.iMonth = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth();
    this.iDay = iDay > 0 ? iDay : dt.getDate();

    i = parseInt(this.options.minyear) || 0; this.minYear = i > 0 ? iYear - i : iYear;
    i = parseInt(this.options.maxyear) || 0; this.maxYear = i > 0 ? iYear + i : iYear;
    
    this.SetYear(); this.SetMonth(); this.SetDay();
    
    var oDateSelector = this;
    oYear.onchange = function()...{ oDateSelector.onYearChange() };
    oMonth.onchange = function()...{ oDateSelector.onMonthChange() };
    oDay.onchange = function()...{ oDateSelector.onDayChange() };
  },
  //设置默认属性
  SetOptions: function(options) ...{
    var dt = this.date;
    this.options = ...{//默认值
      year:            dt.getFullYear(),//年
      month:        dt.getMonth() + 1,//月
      day:            dt.getDate(),//日
      minyear:        0,//最小年份与year相差的年数
      maxyear:        5//最大年份与year相差的年数
    };
    Object.extend(this.options, options || ...{});
  },
  //年改变事件
  onYearChange: function() ...{
    this.iYear = this.oYear.value; this.SetDay();
  },
  //月改变事件
  onMonthChange: function() ...{
    this.iMonth = this.oMonth.value; this.SetDay();
  },
  //日改变事件
  onDayChange: function() ...{
    this.iDay = this.oDay.value;
  },
  //年设置
  SetYear: function() ...{
    var minYear = this.minYear;
    this.SetSelector(this.oYear, minYear, this.maxYear, this.iYear - minYear);
  },
  //月设置
  SetMonth: function() ...{
    this.SetSelector(this.oMonth, 1, 12, this.iMonth - 1);
  },
  //日设置
  SetDay: function() ...{
    //精髓所在
    var iDay = this.iDay, dt = new Date(this.iYear, this.iMonth, 0), daysInMonth = dt.getDate();
    if (iDay > daysInMonth) ...{ this.iDay = iDay = daysInMonth; };
    this.SetSelector(this.oDay, 1, daysInMonth, iDay - 1);
  },
  //列表设置
  SetSelector: function(oSel, iMin, iMax, iIndex) ...{
    oSel.options.length = 0;
    for (var i = iMin; i <= iMax; i++) ...{
        var op = document.createElement("OPTION");
        op.value = i; op.innerHTML = i;
        oSel.appendChild(op);
    }
    oSel.selectedIndex = iIndex;
  }
};
</ script >
</ head >

< body >
< select  id ="idYear" ></ select >  
< select  id ="idMonth" ></ select >  
< select  id ="idDay" ></ select >  
< script > ...
new DateSelector("idYear", "idMonth", "idDay", ...{ minyear:10, maxyear:10 });
</ script >
</ body >
</ html >