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
投稿
猜你喜欢
vue 修改 data 数据问题并实时显示操作
2024-05-02 17:00:53
Vue + Webpack + Vue-loader学习教程之相关配置篇
2024-04-29 13:10:40
Python2.7环境Flask框架安装简明教程【已测试】
2023-12-17 11:59:42
详解vue-Resource(与后端数据交互)
2024-06-05 09:15:06
python连接远程ftp服务器并列出目录下文件的方法
2023-10-20 10:35:04
vue中简单弹框dialog的实现方法
2024-05-21 10:14:57
python调用matlab的m自定义函数方法
2023-11-11 21:40:52
MySQL 视图 第1349号错误解决方法
2024-01-18 14:45:41
Sql Server 2005读取外部数据的方法
2008-07-08 19:08:00
laravel 实现阿里云oss文件上传功能的示例
2023-06-13 20:39:26
浅谈Series和DataFrame中的sort_index方法
2022-07-01 05:53:22
Python压缩解压缩zip文件及破解zip文件密码的方法
2023-04-20 10:30:30
对Web开发人员有用的8个网站小结
2022-01-16 09:39:20
linux安装mysql和使用c语言操作数据库的方法 c语言连接mysql
2024-01-12 20:31:03
快速掌握ASP连接11种数据库的常用语法
2008-11-28 15:32:00
Matlab中plot基本用法的具体使用
2022-08-14 10:28:24
Python中csv模块的基本使用教程
2021-06-20 21:49:55
Python设计模式编程中解释器模式的简单程序示例分享
2023-01-16 08:44:29
Vue.js 2.5新特性介绍(推荐)
2024-05-13 09:09:00
pytorch读取图像数据转成opencv格式实例
2021-01-31 03:12:22