JavaScript 日期联动选择器

Question

程序源码
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};var Class = {
  create: function() {
return function() {
  this.initialize.apply(this, arguments);
}
  }
}var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}var DateSelector = Class.create();
DateSelector.prototype = {
  initialize: function(oYear, oMonth, oDay, options) {
this.SelYear = $(oYear);//年选择对象
this.SelMonth = $(oMonth);//月选择对象
this.SelDay = $(oDay);//日选择对象

this.SetOptions(options);

var dt = new Date(), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day), iMinYear = parseInt(this.options.MinYear), iMaxYear = parseInt(this.options.MaxYear);

this.Year = parseInt(this.options.Year) || dt.getFullYear();
this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
this.Day = iDay > 0 ? iDay : dt.getDate();
this.MinYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year;
this.MaxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year;
this.onChange = this.options.onChange;

//年设置
this.SetSelect(this.SelYear, this.MinYear, this.MaxYear - this.MinYear + 1, this.Year - this.MinYear);
//月设置
this.SetSelect(this.SelMonth, 1, 12, this.Month - 1);
//日设置
this.SetDay();

var oThis = this;
//日期改变事件
addEventHandler(this.SelYear, "change", function(){
oThis.Year = oThis.SelYear.value; oThis.SetDay(); oThis.onChange();
});
addEventHandler(this.SelMonth, "change", function(){
oThis.Month = oThis.SelMonth.value; oThis.SetDay(); oThis.onChange();
});
addEventHandler(this.SelDay, "change", function(){ oThis.Day = oThis.SelDay.value; oThis.onChange(); });
  },
  //设置默认属性
  SetOptions: function(options) {
this.options = {//默认值
Year: 0,//年
Month: 0,//月
Day: 0,//日
MinYear: 0,//最小年份
MaxYear: 0,//最大年份
onChange: function(){}//日期改变时执行
};
Extend(this.options, options || {});
  },
  //日设置
  SetDay: function() {
//取得月份天数
var daysInMonth = new Date(this.Year, this.Month, 0).getDate();
if (this.Day > daysInMonth) { this.Day = daysInMonth; };
this.SetSelect(this.SelDay, 1, daysInMonth, this.Day - 1);
  },
  //select设置
  SetSelect: function(oSelect, iStart, iLength, iIndex) {
//添加option
oSelect.options.length = iLength;
for (var i = 0; i < iLength; i++) { oSelect.options[i].text = oSelect.options[i].value = iStart + i; }
//设置选中项
oSelect.selectedIndex = iIndex;
  }
};

Answer 1

BUG报告：
先选择2008-2-29
再改变年到2009上下显示就不一致鸟。
“2009年2月1日”
“你选择的日期：2009/2/28”不用太感谢我。

Answer 2

请各位帮忙测试一下ff3看是不是有zswang 说的问题吧

Answer 3

三步：
1、选择日期到“2008-02-28”
2、改变号数到“29”
3、改变年份到“2009”
FF3中则出现不一致；
IE8测试没有问题。

Answer 4

调试环境：Windows 2003 Server Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4 (.NET CLR 3.5.30729)

Answer 5

!~  
ie 6  ff3.0  没发现以上现象。

Answer 6

我也发现zswang说的现象了，我的是XP，ie7，ff3.0.4，ie7下没问题，ff下和zswang的一样，上面显示2月1日，下面显示2月28日。

Answer 7

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Answer 8

那就有可能是那个blog网站的问题，可能作了什么对代码的操作。

Answer 9

比如用ff就能看到祥云的title背景图片，而ie下就看不到图片。

Answer 10

faint
原来blog上的设置选中项是用
oSelect.options[iIndex].setAttribute("selected", "true");
结果ff就设置失败了
改回oSelect.selectedIndex = iIndex;就好了
估计是测试的时候忘了改回来了

Answer 11

瑞意日期选择框 RCalendar 2.0
http://www.rainic.com/blog/index.php/209相对于1.1版本，有如下更新：1. 修正了IE7中的少量兼容问题
2. 新增了时分秒的选择，使rcalendar变成有两种模式，dateonly和full，默认是dateonly
3. 新增“确定”和“清除”两个按钮
4. 修正了Opera中微小的兼容问题
5. 增强了对日期格式的容错处理
6. 新增了选择日期后的事件处理函数的参数

Answer 12

上面那个日期选择控件是兼容IE、Firefox、Opera、Safari、Chrome的

Answer 13

http://topic.csdn.net/t/20040723/13/3203177.html这是我04年写的差不多功能的代码.

Answer 14

附我的建议:
更多精彩内容,尽在以下链接:
http://topic.csdn.net/u/20081119/11/bda8bc5d-98d0-45ee-a1c1-86209d7f121d.html?seed=38671534

Answer 15

学习  3Q   LZ