<html>
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雨)//www.meizz.com'>
</head>
<body onload="YYYYMMDDstart(document.form1,document.form1.SYear,document.form1.SMonth,document.form1.SDay),YYYYMMDDstart(document.form1,document.form1.EYear,document.form1.EMonth,document.form1.EDay)">
<form name=form1>
起始时间：
<select name=SYear onchange="YYYYDD(this.value,document.form1.SMonth,document.form1.SDay)">
<option value="">年</option>
</select>年
<select name=SMonth onchange="MMDD(this.value,document.form1.SYear,document.form1.SDay)">
<option value="">月</option>
</select>月
<select name=SDay>
<option value="">日</option>
</select>日<br><br>
完成时间：
<select name=EYear onchange="YYYYDD(this.value,document.form1.EMonth,document.form1.EDay)">
<option value="">年</option>
</select>年
<select name=EMonth onchange="MMDD(this.value,document.form1.EYear,document.form1.EDay)">
<option value="">月</option>
</select>月
<select name=EDay>
<option value="">日</option>
</select>日
</form>
<script language="JavaScript"><!--
function YYYYMMDDstart(form,year,month,day)
{
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先给年下拉框赋内容
var y = new Date().getFullYear();
for (var i = (y-3); i < (y+5); i++) //以今年为准，前30年，后30年
year.options.add(new Option(i,i));
//赋月份的下拉框
for (var i = 1; i < 13; i++)
month.options.add(new Option(i,i));
year.value = y;
month.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() ==1 && IsPinYear(year.options[year.selectedIndex].value)) n++;
writeDay(n,day); //赋日期下拉框Author:meizz
day.value = new Date().getDate();
}
function YYYYDD(str,month,day) //年发生变化时日期发生变化(主要是判断闰平年)
{
var MMvalue = month.options[month.selectedIndex].value;
if (MMvalue == "" ){ var e = day; optionsClear(e); return;}
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n,day)
}
function MMDD(str,year,day) //月发生变化时日期联动
{
var YYYYvalue = year.options[year.selectedIndex].value;
if (YYYYvalue == "" ){ var e = day; optionsClear(e); return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n,day)
}
function writeDay(n,day) //据条件写日期的下拉框
{
var e = day; 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)
{
for (var i=e.options.length; i>0; i--)
e.remove(i);
}
function compDate(SY,SM,SD,EY,EM,ED)
{
}
//--></script>
</body>
</html>
分享到：
相关推荐
标题“年月日三下拉框联动”涉及的是在网页前端开发中常见的一种交互设计，通常用于日期选择功能。这种设计允许用户通过三个独立的下拉框分别选择年、月和日，形成一个完整的日期输入。这样的方式既方便用户操作，也...
### HTML年月日三下拉框联动：深入解析与实现 在HTML网页设计中，创建交互式的用户界面是提升用户体验的关键。其中，日期选择器是一个常见的功能，尤其是当需要用户输入具体的日期时。本文将详细解析一个简单的HTML...
一个年月日三下拉框联动实现JS代码 (this.value)"> 请选择 年 (this.value)"> 选择 月 选择 日 </form>
一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 <title>JQuery 年月日三下拉框联动 <script src="jquery-1.4.2.min.js" type="text/javascript"></script> ...
"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案，它利用JavaScript库JQuery的便利性和高效性，实现了用户在选择年份后，月份和日期下拉框自动更新的交互效果。这种方式可以提高用户体验，减少用户手动操作...
在网页开发中，"JQuery+年月日三级下拉框联动"是一个常见的交互设计，主要用于用户输入日期的场景，例如填写表单时选择出生日期。这个设计涉及到JavaScript库JQuery的使用，以及HTML下拉框（select）的动态联动效果...
在网页设计中，"下拉框年月日3级联动"是一种常见的交互方式，它用于让用户方便地选择日期。这种设计通常由三个下拉框组成，分别代表年、月和日，用户依次从每个下拉框中选择，形成完整的日期。这种联动效果使得用户...
在网页设计和开发中，"年月日联动下拉_日期_下拉框_"是一个常见的交互功能，主要用于用户输入日期时提供便捷的选择方式。这个功能通常由三个独立的下拉框组成，分别用于选择年份、月份和日期，且这三个下拉框之间...
在网页开发中，用户界面经常需要提供选择日期的控件，这时“年月日三级联动下拉框”就显得尤为重要。这种设计模式可以为用户提供一个直观且高效的日期选择方式，通常由三个下拉菜单组成，分别对应年、月、日，用户...
在年月日的日期选择器中，"三级联动"意味着当用户在一级（年份）下拉框中选择一个年份后，二级（月份）的下拉框会自动更新为该年份的所有月份；同样，当用户在二级（月份）下拉框中选定一个月份后，三级（日期）的...
"jQuery年月日三级联动(生日)插件"就是为了简化这一过程而设计的，它使得用户能更直观、高效地选择日期，提高了用户体验。这个插件通过将年、月、日分别作为三个下拉菜单，实现联动效果，即用户在选择一个年份后，...
"jQuery年月日三级联动"是一种常见的交互设计，它通过下拉框的形式，让用户依次选择年、月、日，形成一个完整的日期。这种设计使得日期输入更加直观且易于操作。接下来，我们将深入探讨这个主题。 首先，jQuery是一...
"JS实现的年月日三级联动下拉框日期选择效果源码.zip" 提供了一个利用JavaScript实现的年月日三级联动下拉框的解决方案。这种设计允许用户通过下拉菜单分别选择年、月、日，从而简化输入过程，提高用户体验。 首先...
年月日三下拉框联动 </title> ; charset=gb2312'> </head> <body> <form name=form1> (this.value)"> 请选择 年 </option> </select> (this.value)"> 选择 月 </option> </select> <select name=DD> ...
在JavaScript（JS）编程中，实现年月日三级联动下拉框日期选择是一种常见的需求，尤其是在网页表单或交互式用户界面中。这种设计允许用户通过三个下拉菜单分别选择年、月和日，形成一个完整的日期。在这个"JS年月日...
在JavaScript编程中，"年月日3级联动"通常指的是在一个网页表单中，用户选择日期时，下拉框会依次显示年、月、日，且每次选择一级后，下一级的选择项会根据上一级的选择动态更新。这种交互设计提高了用户体验，避免...
jQuery 年月日插件提供了一种简洁高效的方式，实现了年、月、日的下拉联动效果，使得用户界面更加友好且易于操作。本文将详细介绍这个插件的使用方法和关键知识点。 ### 一、引入插件 首先，我们需要在项目中引入 ...
本文将详细讲解如何使用JavaScript来实现年月日的联动选择，以及在HTML中设置下拉框的选择。 首先，我们需要理解什么是联动选择。联动选择是指当用户在一个下拉框中做出选择时，其他相关的下拉框会自动更新其选项，...
"前端年月日三级联动用到的js文件data.zip"是一个压缩包，其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见，它能帮助用户方便地选取精确的日期。 首先，我们要...