日期三级下拉菜单

Html

 1 <select id="selYear"></select>
 2 <select id="selMonth"></select>
 3 <select id="selDay"></select>
 4 <script src="DateSelector.js"></script>
 5 <script type="text/javascript">
 6     var selYear = window.document.getElementById("selYear");
 7     var selMonth = window.document.getElementById("selMonth");
 8     var selDay = window.document.getElementById("selDay");
 9     //var date = new Date();
10     // 新建一个DateSelector类的实例，将三个select对象传进去
11     new DateSelector(selYear, selMonth, selDay, 1990, 1, 1);
12     // 也可以试试下边的代码，起始日为当日
13     //var dt = new Date();
14     //new DateSelector(selYear, selMonth ,selDay, dt);
15 </script>

JS，文件地址http://files.cnblogs.com/files/pzpzpop/DateSelector.js

  1 function DateSelector(selYear, selMonth, selDay) {
  2     this.selYear = selYear;
  3     this.selMonth = selMonth;
  4     this.selDay = selDay;
  5     this.selYear.Group = this;
  6     this.selMonth.Group = this;
  7     // 给年份、月份下拉菜单添加处理onchange事件的函数
  8     if (window.document.all != null) // IE
  9     {
 10         this.selYear.attachEvent("onchange", DateSelector.Onchange);
 11         this.selMonth.attachEvent("onchange", DateSelector.Onchange);
 12     }
 13     else // Firefox
 14     {
 15         this.selYear.addEventListener("change", DateSelector.Onchange, false);
 16         this.selMonth.addEventListener("change", DateSelector.Onchange, false);
 17     }
 18
 19     if (arguments.length == 4) // 如果传入参数个数为4，最后一个参数必须为Date对象
 20         this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());
 21     else if (arguments.length == 6) // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
 22         this.InitSelector(arguments[3], arguments[4], arguments[5]);
 23     else // 默认使用当前日期
 24     {
 25         var dt = new Date();
 26         this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
 27     }
 28 }
 29
 30 // 增加一个最大年份的属性
 31 DateSelector.prototype.MinYear = 1900;
 32
 33 // 增加一个最大年份的属性
 34 DateSelector.prototype.MaxYear = (new Date()).getFullYear();
 35
 36 // 初始化年份
 37 DateSelector.prototype.InitYearSelect = function () {
 38     // 循环添加OPION元素到年份select对象中
 39     for (var i = this.MaxYear; i >= this.MinYear; i--) {
 40         // 新建一个OPTION对象
 41         var op = window.document.createElement("OPTION");
 42
 43         // 设置OPTION对象的值
 44         op.value = i;
 45
 46         // 设置OPTION对象的内容
 47         op.innerHTML = i;
 48
 49         // 添加到年份select对象
 50         this.selYear.appendChild(op);
 51     }
 52 }
 53
 54 // 初始化月份
 55 DateSelector.prototype.InitMonthSelect = function () {
 56     // 循环添加OPION元素到月份select对象中
 57     for (var i = 1; i < 13; i++) {
 58         // 新建一个OPTION对象
 59         var op = window.document.createElement("OPTION");
 60
 61         // 设置OPTION对象的值
 62         op.value = i;
 63
 64         // 设置OPTION对象的内容
 65         op.innerHTML = i;
 66
 67         // 添加到月份select对象
 68         this.selMonth.appendChild(op);
 69     }
 70 }
 71
 72 // 根据年份与月份获取当月的天数
 73 DateSelector.DaysInMonth = function (year, month) {
 74     var date = new Date(year, month, 0);
 75     return date.getDate();
 76 }
 77
 78 // 初始化天数
 79 DateSelector.prototype.InitDaySelect = function () {
 80     // 使用parseInt函数获取当前的年份和月份
 81     var year = parseInt(this.selYear.value);
 82     var month = parseInt(this.selMonth.value);
 83
 84     // 获取当月的天数
 85     var daysInMonth = DateSelector.DaysInMonth(year, month);
 86
 87     // 清空原有的选项
 88     this.selDay.options.length = 0;
 89     // 循环添加OPION元素到天数select对象中
 90     for (var i = 1; i <= daysInMonth; i++) {
 91         // 新建一个OPTION对象
 92         var op = window.document.createElement("OPTION");
 93
 94         // 设置OPTION对象的值
 95         op.value = i;
 96
 97         // 设置OPTION对象的内容
 98         op.innerHTML = i;
 99
100         // 添加到天数select对象
101         this.selDay.appendChild(op);
102     }
103 }
104
105 // 处理年份和月份onchange事件的方法，它获取事件来源对象（即selYear或selMonth）
106 // 并调用它的Group对象（即DateSelector实例，请见构造函数）提供的InitDaySelect方法重新初始化天数
107 // 参数e为event对象
108 DateSelector.Onchange = function (e) {
109     var selector = window.document.all != null ? e.srcElement : e.target;
110     selector.Group.InitDaySelect();
111 }
112
113 // 根据参数初始化下拉菜单选项
114 DateSelector.prototype.InitSelector = function (year, month, day) {
115     // 由于外部是可以调用这个方法，因此我们在这里也要将selYear和selMonth的选项清空掉
116     // 另外因为InitDaySelect方法已经有清空天数下拉菜单，因此这里就不用重复工作了
117     this.selYear.options.length = 0;
118     this.selMonth.options.length = 0;
119
120     // 初始化年、月
121     this.InitYearSelect();
122     this.InitMonthSelect();
123
124     // 设置年、月初始值
125     this.selYear.selectedIndex = this.MaxYear - year;
126     this.selMonth.selectedIndex = month - 1;
127
128     // 初始化天数
129     this.InitDaySelect();
130
131     // 设置天数初始值
132     this.selDay.selectedIndex = day - 1;
133
134 }