<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>
分享到：
相关推荐
### 严格的三级联动日期下拉菜单 在网页开发过程中，日期选择器是非常常见的一个功能模块。特别是对于需要用户输入特定日期的应用场景来说，一个友好且准确的日期选择器能够极大地提升用户体验并减少输入错误的发生...
这个“js日期三级联动-滑动选择.rar”压缩包提供了一个解决方案，适用于PC和H5平台，旨在优化用户体验，实现日期选择的三级联动功能。下面我们将详细探讨这个功能的实现原理以及涉及到的相关知识点。 1. **日期选择...
在提供的"jQuery日期三级联动"压缩包中，应包含一个HTML文件，它可能包含了HTML结构、内联CSS样式和内联JavaScript代码，或者引用了外部的jQuery库和Datepicker插件。分析这个示例页面，我们可以看到如何将理论知识...
在IT行业中，尤其是在前端开发领域，"二级联动三级联动"是一种常见的交互设计模式，它主要应用于数据筛选或下拉菜单的选择。这种设计涉及到多个选择项之间的关联性，当用户在一个选择项中做出选择时，其他相关的选择...
"jQuery年月日三级联动(生日)插件"就是为了简化这一过程而设计的，它使得用户能更直观、高效地选择日期，提高了用户体验。这个插件通过将年、月、日分别作为三个下拉菜单，实现联动效果，即用户在选择一个年份后，...
在JavaScript编程中，"年月日三级联动"通常是指在一个网页表单中，用户选择年份后，月份和日期会自动根据所选年份更新其可选项，形成一个连续的下拉选择效果。这种功能常见于日期选择器，能够提高用户体验，避免用户...
"jQuery年月日三级联动"是一种常见的交互设计，它通过下拉框的形式，让用户依次选择年、月、日，形成一个完整的日期。这种设计使得日期输入更加直观且易于操作。接下来，我们将深入探讨这个主题。 首先，jQuery是一...
本文将详细讲解如何使用JavaScript实现年、月、日三级联动的下拉框日期选择器。 首先，我们需要理解“三级联动”这个概念。在年月日的日期选择器中，"三级联动"意味着当用户在一级（年份）下拉框中选择一个年份后，...
在IT领域，尤其是在前端开发中，"jquery省市区三级联动"是一个常见的需求，主要用于实现用户在选择地址时的交互体验。这个功能允许用户先选择省份，接着根据省份选择城市，最后选择区县，形成一个完整的地址。在这个...
经典年月日三级联动 <html> <head> 年月日三下拉框联动 </title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> </head> <body> <form name=form1> (this.value)"> 请选择 年 ...
在网页开发中，有时我们需要创建一个用户友好的界面来选择日期，这通常涉及到年、月、日的三级下拉框联动。"JQuery年月日三级下拉框联动"就是一个解决此类需求的方案，它利用JavaScript库JQuery的便利性和高效性，...
在网页设计中，年、月、日三级联动通常指的是用户在选择日期时，选择年份会自动影响月份的选择，月份选择后又会影响日期的选择，这种功能常见于日期输入框。下面将详细介绍如何使用JavaScript实现这样的功能。 首先...
在JavaScript（JS）开发中，二级联动和三级联动通常用于创建动态交互的下拉菜单，常见于省市区选择、日期选择等场景。这种技术能够实现一个下拉菜单的选择影响另一个下拉菜单的显示内容，为用户提供更为直观的操作...
最后，"省市区三级联动"是指在表单中，当用户选择一个省份时，相关的城市会自动加载；选择城市后，对应的区县也会自动显示。这是一种典型的动态下拉列表，利用JavaScript根据用户的选择动态请求和填充数据，提升用户...
"JS实现的年月日三级联动下拉框日期选择效果源码.zip" 提供了一个利用JavaScript实现的年月日三级联动下拉框的解决方案。这种设计允许用户通过下拉菜单分别选择年、月、日，从而简化输入过程，提高用户体验。 首先...
在JavaScript（JS）编程中，实现年月日三级联动下拉框日期选择是一种常见的需求，尤其是在网页表单或交互式用户界面中。这种设计允许用户通过三个下拉菜单分别选择年、月和日，形成一个完整的日期。在这个"JS年月日...
在这篇关于jQuery进阶的文章中，作者详细讲解了如何使用jQuery进行一些高级操作，例如权限选择、表单验证、时间插件的使用、封装ajax以及实现三级联动等功能。以下是对文章内容知识点的详细解析： 1. jQuery基础...
在本文中，我们将深入探讨如何使用jQuery实现时间日期三级联动的效果。这个效果通常用于日历选择器或表单中，用户可以选择年、月、日，而下级的选择会根据上一级的选择动态更新。以下是实现这一功能的关键知识点： ...
在IT开发领域，"年月日三级联动下拉"是一种常见的日期选择组件，尤其适用于网页表单或应用程序的填写界面。这种设计模式提高了用户输入日期的效率和准确性，因为用户无需逐个输入年份、月份和日期，而是通过下拉菜单...
在网页开发中，用户输入是常见的一环，尤其是在涉及到日期选择时，为了提供更好的用户体验，开发者往往会使用插件来实现年、月、日的三级联动选择。jQuery年月日三级联动(生日) 插件正是为此目的设计的，它简化了...