`
weiweichen1985
  • 浏览: 140990 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js实现的年月日三级联动

J#IEFirefox浏览器IDEA 
阅读更多 
年默认加载到距离当前100年的年份，同时根据月份是否是闰年自动加载天数。。。

<table cellspacing="0" cellpadding="6" border="1">
<tr>
					<td>
						出生日期：
					</td>
					<td bgcolor="#FFFFFF" class="td_left">
						<select name="year" onchange="getDates()">
							<script language="javascript" type="text/javascript">
							
							
		
		 					
							
          var date=new Date();
		  var year=date.getYear();
//加载距离当前年份100年的所有年份。。。
		  for(var i=year;i>=year-100;i--){
		  	     document.write("<option value="+i+">"+i+"</option>");
		  }
		  
		  //创建option元素，并追加到指定select元素
		  function  append(o,v){
		  	  var option=document.createElement("option");
			  option.value=v;
			  option.innerText=v;
			  o.appendChild(option);
		  }
		  //根据年月的值来加载日，判断了月份是否是闰年。。。
		  function  getDates(){
		  	   
		  	   var y=document.getElementsByName("year")[0].value;
			   var m=document.getElementsByName("month")[0].value;
			   
			   var day=document.getElementsByName("day")[0];
			   day.innerHTML="";
			   
			   if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){
			   		for(var j=1;j<=31;j++){
			   				append(day,j);
					}
			   }
			   else if(m==4 || m==6 || m==9 || m==11){
			   	    for(var j=1;j<=30;j++){
			   			    append(day,j);
					}
			   }
			   else if(m==2){
					var flag=true;
					flag=y%4==0&&y%100!=0||y%400==0;
			   		if(flag){
						 for(var j=1;j<=29;j++){
						   append(day,j);
						 }
					}
					else{
						 for(var j=1;j<=28;j++){
			   				append(day,j);
						 }
					}
			   }
			   
		  }
</script>
						</select>
						年
						<select name="month" onchange="getDates()">
							<script language="javascript" type="text/javascript">
          
		  for(var i=1;i<=12;i++){
		  	    document.write("<option value="+i+">"+i+"</option>");
		  }
</script>
						</select>
						月
						<select name="day">
							<script language="javascript" type="text/javascript">
          
		  for(var i=1;i<=31;i++){
		  	    document.write("<option value="+i+">"+i+"</option>");
		  }
</script>
						</select>
						日
					</td>
				</tr>
</table>
  • ymd.rar (762 Bytes)
  • 下载次数: 211
分享到：
| java mail
评论
3 楼 igogo007 2008-08-12  
日历来的更简洁，让用户操作三遍，不符合用户体验。
2 楼 hanhan7673 2008-08-12  
谢谢了，代码我收藏了啊   
1 楼 weiweichen1985 2008-04-28  
今天项目跨浏览器测试，发现存在兼容性问题。。。
改了下。。。OK了，支持4种浏览器（IE,FireFox,Netscape,Maxthon)
<!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=gbk" />
</head>
<table cellspacing="0" cellpadding="6" border="1">
<tr>
					<td>
						出生日期：
					</td>
					<td bgcolor="#FFFFFF" class="td_left">
						<select name="year" onchange="getDates()">
							<script language="javascript" type="text/javascript">
							
							
		
		 					
							
          var date=new Date();
		  var year=date.getFullYear();
		  
		  for(var i=year;i>=year-100;i--){
		  	     document.write("<option value="+i+">"+i+"</option>");
		  }
		  
		  
		  function  append(o,v){
		  	  //var option=document.createElement("option");
			  //option.value=v;
			  //option.innerText=v;
			  var option=new Option(v,v);
			  //o.appendChild(option);
			  o.options.add(option);
		  }
		  
		  function  getDates(){
		  	   
		  	   var y=document.getElementsByName("year")[0].value;
			   var m=document.getElementsByName("month")[0].value;
			   
			   var day=document.getElementsByName("day")[0];
			   day.innerHTML="";
			   
			   if(m==1 || m==3 || m==5 || m==7 || m==8 || m==10 || m==12){
			   		for(var j=1;j<=31;j++){
			   				append(day,j);
					}
			   }
			   else if(m==4 || m==6 || m==9 || m==11){
			   	    for(var j=1;j<=30;j++){
			   			    append(day,j);
					}
			   }
			   else if(m==2){
					var flag=true;
					flag=y%4==0&&y%100!=0||y%400==0;
			   		if(flag){
						 for(var j=1;j<=29;j++){
						   append(day,j);
						 }
					}
					else{
						 for(var j=1;j<=28;j++){
			   				append(day,j);
						 }
					}
			   }
			   
		  }
</script>
						</select>
						年
						<select name="month" onchange="getDates()">
							<script language="javascript" type="text/javascript">
          
		  for(var i=1;i<=12;i++){
		  	    document.write("<option value="+i+">"+i+"</option>");
		  }
</script>
						</select>
						月
						<select name="day">
							<script language="javascript" type="text/javascript">
          
		  for(var i=1;i<=31;i++){
		  	    document.write("<option value="+i+">"+i+"</option>");
		  }
</script>
						</select>
						日
					</td>
				</tr>
</table>
</html>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    用JavaScript写的年月日三级联动

    用标准JavaScript实现的年月日下拉列表三级联动，支持IE6、FireFox3。

    js年月日三级联动代码

    总之，"js年月日三级联动代码"是通过JavaScript监听年份选择的改变，动态生成对应的月份和日期选项，以实现日期选择的联动效果。这个功能在许多网页表单中都很常见，对于用户输入日期提供了便利。在实际开发中，我们...

    jquery年月日三级联动

    在实现年月日三级联动时，jQuery的主要作用在于动态更新下拉菜单，根据用户在前一个菜单中的选择来填充下一个菜单的内容。 1. **年份选择**：通常，我们会创建一个包含过去若干年和未来若干年的选项的下拉菜单。...

    jQuery年月日三级联动(生日)插件

    在网页开发中，用户输入是常见的一环，特别是在涉及到...总的来说，"jQuery年月日三级联动(生日)插件"是一个高效且实用的前端工具，它通过jQuery的强大功能，实现了年月日选择的便捷性，是网页开发中的一个良好实践。

    javascript经典年月日三级联动

    经典年月日三级联动 &lt;html&gt; &lt;head&gt; 年月日三下拉框联动 &lt;/title&gt; ; charset=gb2312'&gt; &lt;/head&gt; &lt;body&gt; &lt;form name=form1&gt; (this.value)"&gt; 请选择 年 &lt;/option&gt; &lt;/select&gt; (this.value)"&gt; 选择 月 ...

    javaScript 实现的年月日三级联动

    在网页设计中，年、月、日三级联动通常指的是用户在选择日期时，选择年份会自动影响月份的选择，月份选择后又会影响日期的选择，这种功能常见于日期输入框。下面将详细介绍如何使用JavaScript实现这样的功能。 首先...

    JS初始化年月日三级联动插件

    JS初始化年月日三级联动插件 创建三个select标签 id分别为 YYYY,MM,DD,

    前端年月日三级联动用到的js文件data.zip

    "前端年月日三级联动用到的js文件data.zip"是一个压缩包，其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见，它能帮助用户方便地选取精确的日期。 首先，我们要...

    JQuery年月日三级下拉框联动

    "JQuery年月日三级下拉框联动"就是一个解决此类需求的方案，它利用JavaScript库JQuery的便利性和高效性，实现了用户在选择年份后，月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验，减少用户手动操作...

    JS实现的年月日三级联动下拉框日期选择效果源码.zip

    "JS实现的年月日三级联动下拉框日期选择效果源码.zip" 提供了一个利用JavaScript实现的年月日三级联动下拉框的解决方案。这种设计允许用户通过下拉菜单分别选择年、月、日，从而简化输入过程，提高用户体验。 首先...

    JS年月日三级联动下拉框日期选择代码

    本文将详细讲解如何使用JavaScript实现年、月、日三级联动的下拉框日期选择器。 首先，我们需要理解“三级联动”这个概念。在年月日的日期选择器中，"三级联动"意味着当用户在一级（年份）下拉框中选择一个年份后，...

    javascript年月日三级联动带平年闰年计算

    绝对好用，纯js的年月日三级联动（带平年闰年计算)

    js的年月日3级联动

    在JavaScript编程中，"年月日3级联动"通常指的是在一个网页表单中，用户选择日期时，下拉框会依次显示年、月、日，且每次选择一级后，下一级的选择项会根据上一级的选择动态更新。这种交互设计提高了用户体验，避免...

    JS年月日三级联动下拉框

    总结一下，实现“JS年月日三级联动下拉框”主要涉及以下几个知识点： 1. JavaScript Date对象的使用，包括创建日期、获取和设置日期属性。 2. DOM操作，包括获取元素、创建和修改元素、添加和移除事件监听器。 3. 平...

    YMDClass年月日三级联动纯JS封装类精简插件

    【标题】"YMDClass年月日三级联动纯JS封装类精简插件"是一个用于网页表单的日期选择组件，旨在实现用户友好的交互体验。这个插件使用JavaScript编程语言，无需依赖其他库如jQuery，因此在轻量级项目中尤为适用。它...

    年月日三级联动下拉列表

    在网页开发中，"年月日三级联动下拉列表"是一种常见的...通过以上步骤，我们可以实现一个完整的"年月日三级联动下拉列表"功能。这种设计提高了用户的输入效率，简化了日期选择的过程，是网页表单中常用的一种交互方式。

    年月日三级联动（带平年闰年计算）

    该代码是用javascript实现年月日的联动 不用数据库 自动识别平年闰年 方便实用

    JQuery 年月日三级下拉框联动

    一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 &lt;title&gt;JQuery 年月日三下拉框联动 &lt;script src="jquery-1.4.2.min.js" type="text/javascript"&gt; &lt;script src="JQSelect.js" type="text/javascript...

    年月日三级联动下拉

    总的来说，"年月日三级联动下拉"组件的实现涉及到前端开发的多个方面，包括HTML、CSS、JavaScript、以及现代前端框架的使用。在实际应用中，开发者需要结合业务需求和用户体验，对这些技术进行灵活运用。

Magicbox
Global site tag (gtag.js) - Google Analytics