javascript实现的年月日三级联动

最新推荐文章于 2020-06-11 16:48:05 发布
最新推荐文章于 2020-06-11 16:48:05 发布
阅读量987 收藏
点赞数
文章标签： javascript function date firefox null 工作
<script type="text/javascript">
function DateSelector(selYear, selMonth, selDay)
{
this.selYear = selYear;
this.selMonth = selMonth;
this.selDay = selDay;
this.selYear.Group = this;
this.selMonth.Group = this;
// 给年份、月份下拉菜单添加处理onchange事件的函数
if(window.document.all != null) // IE
{
this.selYear.attachEvent("onchange", DateSelector.Onchange);
this.selMonth.attachEvent("onchange", DateSelector.Onchange);
}
else // Firefox
{
this.selYear.addEventListener("change", DateSelector.Onchange, false);
this.selMonth.addEventListener("change", DateSelector.Onchange, false);
}

if(arguments.length == 4)
// 如果传入参数个数为4，最后一个参数必须为Date对象
this.InitSelector(arguments[3].getFullYear(),
arguments[3].getMonth() + 1, arguments[3].getDate());
else if(arguments.length == 6)
// 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
this.InitSelector(arguments[3], arguments[4], arguments[5]);
else // 默认使用当前日期
{
var dt = new Date();
this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
}
}

// 增加一个最大年份的属性
DateSelector.prototype.MinYear = 1900;

// 增加一个最大年份的属性
DateSelector.prototype.MaxYear = (new Date()).getFullYear();

// 初始化年份
DateSelector.prototype.InitYearSelect = function()
{
// 循环添加OPION元素到年份select对象中
for(var i = this.MaxYear; i >= this.MinYear; i--)
{
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");

// 设置OPTION对象的值
op.value = i;

// 设置OPTION对象的内容
op.innerHTML = i;

// 添加到年份select对象
this.selYear.appendChild(op);
}
}

// 初始化月份
DateSelector.prototype.InitMonthSelect = function()
{
// 循环添加OPION元素到月份select对象中
for(var i = 1; i < 13; i++)
{
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");

// 设置OPTION对象的值
op.value = i;

// 设置OPTION对象的内容
op.innerHTML = i;

// 添加到月份select对象
this.selMonth.appendChild(op);
}
}

// 根据年份与月份获取当月的天数
DateSelector.DaysInMonth = function(year, month)
{
var date = new Date(year, month, 0);
return date.getDate();
}

// 初始化天数
DateSelector.prototype.InitDaySelect = function()
{
// 使用parseInt函数获取当前的年份和月份
var year = parseInt(this.selYear.value);
var month = parseInt(this.selMonth.value);

// 获取当月的天数
var daysInMonth = DateSelector.DaysInMonth(year, month);

// 清空原有的选项
this.selDay.options.length = 0;
// 循环添加OPION元素到天数select对象中
for(var i = 1; i <= daysInMonth ; i++)
{
// 新建一个OPTION对象
var op = window.document.createElement("OPTION");

// 设置OPTION对象的值
op.value = i;

// 设置OPTION对象的内容
op.innerHTML = i;

// 添加到天数select对象
this.selDay.appendChild(op);
}
}

/* 处理年份和月份onchange事件的方法，它获取事件来
源对象（即selYear或selMonth）
// 并调用它的Group对象（即DateSelector实例，请见构造
函数）提供的InitDaySelect方法重新初始化天数
// 参数e为event对象 */
DateSelector.Onchange = function(e)
{
var selector = window.document.all != null ? e.srcElement : e.target;
selector.Group.InitDaySelect();
}

// 根据参数初始化下拉菜单选项
DateSelector.prototype.InitSelector = function(year, month, day)
{
/* 由于外部是可以调用这个方法，因此我们在这里也要将
selYear和selMonth的选项清空掉
// 另外因为InitDaySelect方法已经有清空天数下拉菜单，
因此这里就不用重复工作了 */
this.selYear.options.length = 0;
this.selMonth.options.length = 0;

// 初始化年、月
this.InitYearSelect();
this.InitMonthSelect();

// 设置年、月初始值
this.selYear.selectedIndex = this.MaxYear - year;
this.selMonth.selectedIndex = month - 1;

// 初始化天数
this.InitDaySelect();

// 设置天数初始值
this.selDay.selectedIndex = day - 1;
}
</script>
</head>
<body>
<select id="selYear"></select>
<select id="selMonth"></select>
<select id="selDay"></select>
<script type="text/javascript">
var selYear = window.document.getElementById("selYear");
var selMonth = window.document.getElementById("selMonth");
var selDay = window.document.getElementById("selDay");

// 新建一个DateSelector类的实例，将三个select对象传进去
new DateSelector(selYear, selMonth ,selDay, 2005, 1, 1);
// 也可以试试下边的代码
// var dt = new Date(2004, 1, 29);
// new DateSelector(selYear, selMonth ,selDay, dt);
</script>
unaras
关注
html表单 当前年月日_js实现年月日表单三级联动
weixin_39843093的博客
12-22 667
用Html实现人人网注册界面 ，Js实现生日栏表单三级联动1. 效果2.Html代码部分人人网日期表单联动select{font:20px/40px '宋体';}option {width: 100px;}免费开通人人网账号注册邮箱: 你还可以使用 账号注册或者 手机号 注册创建密码: 真实姓名: 性别： 男女生日: 年月日我现在: 正在上学工作赋闲经商![](verycode.gif) 看不...
js实现年月日表单三级联动
10-20
本文将详细讲解如何使用JavaScript实现年月日表单的三级联动，以生日栏为例。 1. **HTML结构**： 首先，我们需要在HTML中定义三个`<select>`元素，分别代表年、月、日，并为每个`<select>`设置唯一的ID，如`sel1`...
javaScript 实现的年月日三级联动
03-18
NULL 博文链接：https://zhouxianglh.iteye.com/blog/678531
JS 实现的年月日三级联动
weixin_30345577的博客
01-09 265
js文件 SYT="-请选择年份-"; SMT="-请选择月份-"; SDT="-请选择日期-"; BYN=50;//年份范围往前50年 AYN=5;//年份范围往后0年 function YMDselect(){ this.SelY=document.getElementsByName(arguments[0])[0]; this.SelM=document.getElement...
JS实现年月日三级联动
weixin_30707875的博客
07-21 564
所谓联动就是本身的改变受上下级元素影响，常见的多级联动运用在选择年月日，选择国家地区，购物筛选等等，本案例实现的是年月日的三级联动，原生js实现，效果如上图。 大多说多级联动数据都是来自后台数据库的多维数组或者本地数据表，道理大同小异，无外乎js判断上下级关系，获取子父索引关系。本例的年月日也是如此。 年和月好解决，不受谁影响，主要是每月天数受年月影响，闰...
js实现三级联动-年月日
秋叶为何落
11-13 4339
三级联动-年月日 var year=new Date().getFullYear();//在 FF等浏览器内getYear()返回的是 "当前年份-1900" 的值 for(var i = year - 30;i <= year + 30; i++){ document.write("" + i + "");
利用select实现年月日三级联动的日期选择效果【推荐】
08-31
通过这种方式，我们就创建了一个功能完整的年月日三级联动的日期选择器，它可以根据用户的选择动态调整日期范围，并在页面上实时显示选定的日期及其对应的星期。这个功能在网页表单和各种交互式界面中非常实用，可以...
前端年月日三级联动用到的js文件data.zip
04-21
"前端年月日三级联动用到的js文件data.zip"是一个压缩包，其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见，它能帮助用户方便地选取精确的日期。 首先，我们要...
PHP 年月日的三级联动实例代码
10-19
通过上述讲解，我们可以看到一个完整的年月日三级联动功能实现涉及到了前端页面的DOM操作、JavaScript编程和日期计算等多个知识点。希望本文的解析可以帮助大家在实际开发中更好地理解和使用PHP与JavaScript进行日期...
js实现年月日三级联动
weixin_30284355的博客
05-31 258
当我们注册一个qq的时候，会看到一个三级年月日的联动菜单，下面简单介绍。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta ...
年月日三级联动
05-27
三级联动是你在做网站是注册必不可少的部分。java编写的三级联动性能稳定，简单易用
jquery实现日期年月日三级联动插件
07-17
自写的jquery日期年月日三级联动插件，效果很好用，博客里面告知引用办法：http://blog.csdn.net/kabulore 有任何疑问请联系QQ：1740437
用JavaScript写的年月日三级联动
09-21
用标准JavaScript实现的年月日下拉列表三级联动，支持IE6、FireFox3。
javascript经典年月日三级联动
11-27
经典年月日三级联动 <html> <head> <title>年月日三下拉框联动 </title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> </head> <body> <form name=form1> <select name=YYYY onChange="YYYYDD(this.value)"> <option value="">请选择 年 </option> </select> <select name=MM onChange="MMDD(this.value)"> <option value="">选择 月 </option> </select> <select name=DD> <option value="">选择 日 </option> </select> </form> <script language="JavaScript"> <!-- function YYYYMMDDstart() { MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //先给年下拉框赋内容 var y = new Date().getFullYear(); for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年 document.form1.YYYY.options.add(new Option(" "+ i +" 年", i)); //赋月份的下拉框 for (var i = 1; i < 13; i++) document.form1.MM.options.add(new Option(" " + i + " 月", i)); document.form1.YYYY.value = y; document.form1.MM.value = new Date().getMonth() + 1; var n = MonHead[new Date().getMonth()]; if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++; writeDay(n); //赋日期下拉框Author:meizz document.form1.DD.value = new Date().getDate(); } if(document.attachEvent) window.attachEvent("onload", YYYYMMDDstart); else window.addEventListener('load', YYYYMMDDstart, false); function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[MMvalue - 1]; if (MMvalue ==2 && IsPinYear(str)) n++; writeDay(n) } function MMDD(str) //月发生变化时日期联动 { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //据条件写日期的下拉框 { var e = document.form1.DD; optionsClear(e); for (var i=1; i <(n+1); i++) e.options.add(new Option(" "+ i + " 日", i)); } function IsPinYear(year)//判断是否闰平年 { return(0 == year%4 && (year%100 !=0 || year%400 == 0));} function optionsClear(e) { e.options.length = 1; } //--> </script> </body> </html>
jQuery年月日三级联动(生日)
04-10
若是想看详细教程 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。 本文介绍大家如何使用jQuery来实现年月日，以表单生日为例。 更多精品jQuery特效：http://www.sucaihuo.com/js 高手可以欣赏，新手可以学习^_^
纯JS如何实现年月日的三级联动
yihuliunian的博客
06-11 431
转载自品略图书馆http://www.pinlue.com/article/2018/11/2707/037673948110.html <html> <head> <title>年月日三下拉框联动</title> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"> </head> <body> <formname=fo...
用JS实现年月日的联动
倾城一笑stu
06-25 3113
直接上代码 用JS实现年月日的联动 var date=new Date(); //先new出一个date对象 for(var i=1970;i<=date.getFullYear();i++){ //获取当前年份 document.write(""+i+"年"); //循环输出年份，2000是指网页初始时显示的年份 } for(var i=1;i<=
年月日的三级联动
weixin_30300523的博客
05-19 252
<input type="text" id="hs"> <input type="button" id="btn" value="提交"> <span id="rent"></span> 这个年月日的三级联动 主要是用的select标签 var str = "<select id='year'></select&g...
JavaScript实现世界国家地区三级联动菜单
"JS三级联动菜单的实现方法，用于展示世界主要国家和地区，提供完整的代码示例" 在网页设计中，三级联动菜单是一种常见的交互元素，通常用于展示具有层次关系的数据，例如地理区域、产品分类等。在这个案例中，我们...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值