JavaScript 日期下拉选择器

把程序重新写了一遍，日期下拉选择器，可自定义日期范围。

使用了一个技巧获取指定月份的天数。

演示页面：DateSelector.htm

程序代码：

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 Bind = function(object, fun) {
    return function() {
        return fun.apply(object, arguments);
    }
}

var DateSelector = Class.create();
DateSelector.prototype = {
  initialize: function(oYear, oMonth, oDay, options) {
    this._Year = $(oYear);
    this._Month = $(oMonth);
    this._Day = $(oDay);
    
    this.SetOptions(options);
    
    var dt = new Date(), iYear = parseInt(this.options.Year), iMonth = parseInt(this.options.Month), iDay = parseInt(this.options.Day);
    
    this.Year = iYear > 1900 ? iYear : dt.getFullYear() ;
    this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1;
    this.Day = iDay > 0 ? iDay : dt.getDate();

    this.MinYear = this.options.MinYear < this.Year && this.options.MinYear > 1900 ? this.options.MinYear : this.Year;
    this.MaxYear = this.options.MaxYear > this.Year ? this.options.MaxYear : this.Year;
    this.onDateChange = this.options.onDateChange;
    
    //年设置
    this.SetSelect(this._Year, this.MinYear, this.MaxYear, this.Year - this.MinYear);
    //月设置
    this.SetSelect(this._Month, 1, 12, this.Month - 1);
    //日设置
    this.SetDay();
    
    //日期改变事件
    addEventHandler(this._Year, "change", Bind(this, function(){
        this.Year = this._Year.value; this.SetDay(); this.onDateChange();
    }));
    addEventHandler(this._Month, "change", Bind(this, function(){
        this.Month = this._Month.value; this.SetDay(); this.onDateChange();
    }));
    addEventHandler(this._Day, "change", Bind(this, function(){
        this.Day = this._Day.value; this.onDateChange();
    }));
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
        Year:            0,//年
        Month:            0,//月
        Day:            0,//日
        MinYear:        0,//最小年份
        MaxYear:        0,//最大年份
        onDateChange:    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._Day, 1, daysInMonth, this.Day - 1);
  },
  //select设置
  SetSelect: function(oSelect, iMin, iMax, iIndex) {
    oSelect.options.length = 0;
    for (var i = iMin; i <= iMax; i++) {
        var op = document.createElement("OPTION"); op.value = i; op.innerHTML = i;
        oSelect.appendChild(op);
    }
    //ie6的问题
    setTimeout(function(){ oSelect.selectedIndex = iIndex; }, 0);
  }
};

其中技巧在这里：

var daysInMonth = new Date(this.Year, this.Month, 0).getDate();

设置日参数为0，获取上一个月的最后一日，也就是上一个月的天数。

js日期下拉选择器完整实例源码下载：

远程下载：dateselsect.rar（1.56 KB）

asp之家下载：DateSelector.rar （1.56 KB）