日期下拉菜单

最新推荐文章于 2024-09-10 09:52:41 发布

cloudgamer

最新推荐文章于 2024-09-10 09:52:41 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：程序文章标签： function date html class

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/cloudgamer/article/details/1758862

程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的日期选择器，该选择器通过下拉菜单形式提供年、月、日的选择功能，并能够根据所选年月自动调整天数选项。代码中详细展示了如何创建并初始化日期选择器组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>日期下拉菜单</title>

<script type="text/javascript">

var Class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

Object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var DateSelector = Class.create();

DateSelector.prototype = {

initialize: function(idYear, idMonth, idDay, options) {

var oYear = document.getElementById(idYear), oMonth = document.getElementById(idMonth), oDay = document.getElementById(idDay), dt = new Date(), i = 0;

this.oYear = oYear; this.oMonth = oMonth; this.oDay = oDay;

this.date = dt;

this.SetOptions(options);

var iYear = parseInt(this.options.year), iMonth = parseInt(this.options.month), iDay = parseInt(this.options.day);

this.iYear = iYear > 1900 ? iYear : dt.getFullYear() ;

this.iMonth = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth();

this.iDay = iDay > 0 ? iDay : dt.getDate();

i = parseInt(this.options.minyear) || 0; this.minYear = i > 0 ? iYear - i : iYear;

i = parseInt(this.options.maxyear) || 0; this.maxYear = i > 0 ? iYear + i : iYear;

this.SetYear(); this.SetMonth(); this.SetDay();

var oDateSelector = this;

oYear.onchange = function(){ oDateSelector.onYearChange() };

oMonth.onchange = function(){ oDateSelector.onMonthChange() };

oDay.onchange = function(){ oDateSelector.onDayChange() };

},

//设置默认属性

SetOptions: function(options) {

var dt = this.date;

this.options = {//默认值

year: dt.getFullYear(),//年

month: dt.getMonth() + 1,//月

day: dt.getDate(),//日

minyear: 0,//最小年份与year相差的年数

maxyear: 5//最大年份与year相差的年数

};

Object.extend(this.options, options || {});

},

//年改变事件

onYearChange: function() {

this.iYear = this.oYear.value; this.SetDay();

},

//月改变事件

onMonthChange: function() {

this.iMonth = this.oMonth.value; this.SetDay();

},

//日改变事件

onDayChange: function() {

this.iDay = this.oDay.value;

},

//年设置

SetYear: function() {

var minYear = this.minYear;

this.SetSelector(this.oYear, minYear, this.maxYear, this.iYear - minYear);

},

//月设置

SetMonth: function() {

this.SetSelector(this.oMonth, 1, 12, this.iMonth - 1);

},

//日设置

SetDay: function() {

//精髓所在

var iDay = this.iDay, dt = new Date(this.iYear, this.iMonth, 0), daysInMonth = dt.getDate();

if (iDay > daysInMonth) { this.iDay = iDay = daysInMonth; };

this.SetSelector(this.oDay, 1, daysInMonth, iDay - 1);

},

//列表设置

SetSelector: function(oSel, iMin, iMax, iIndex) {

oSel.options.length = 0;

for (var i = iMin; i <= iMax; i++) {

var op = document.createElement("OPTION");

op.value = i; op.innerHTML = i;

oSel.appendChild(op);

}

oSel.selectedIndex = iIndex;

}

};

</script>

</head>

<body>

<select id="idYear"></select>

<select id="idMonth"></select>

<select id="idDay"></select>

<script>

new DateSelector("idYear", "idMonth", "idDay", { minyear:10, maxyear:10 });

</script>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。