JavaScript 日期下拉选择器
作者:cloudgamer 来源:cloudgamer博客 时间:2008-10-31 12:13:00
把程序重新写了一遍,日期下拉选择器,可自定义日期范围。
使用了一个技巧获取指定月份的天数。
演示页面: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)
标签:日期,选择,select,javascript
0
投稿
猜你喜欢
SQL进行排序、分组、统计的10个新技巧
2009-01-23 13:59:00
MYSQL教程:数据列类型与查询效率
2009-02-27 15:37:00
asp事务处理的另外一个方法
2010-05-27 12:18:00
oracle 常见等待事件及处理方法
2009-04-24 12:01:00
Overflow Auto && Position Relative
2009-09-03 12:02:00
SQL Server分析服务性能优化浅析
2010-01-16 13:30:00
让设计散发文化韵味
2009-03-22 15:01:00
oracle 树查询 语句
2009-07-17 18:20:00
MySQL中与NULL值有关的疑难问题
2008-11-24 12:47:00
Asp教程:Response对象
2007-10-01 18:08:00
功能强大,代码简单的管理菜单
2008-07-11 16:52:00
Oracle PL/SQL入门案例实践
2010-07-18 13:13:00
YUI Grids CSS 解读
2008-05-28 12:49:00
SQL Server数据库和Oracle行转列的特殊方案描述
2010-07-26 15:14:00
CSS绝对定位在宽屏分辨率下错位
2009-07-28 12:24:00
xml xpath基础语法
2008-01-21 12:46:00
Web 2.0 框架发布
2008-03-25 09:40:00
SQL Server 安全检查列表全攻略
2008-01-29 13:31:00
asp获取软件下载的真实地址!再谈获取Response.redirect重定向的URL!
2010-03-10 22:03:00
js表单验证控制代码大全
2010-03-07 14:25:00