<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 oYears,oMonths,oDays,isLeapYear;
var iy,im,id;
window.onload=function () {
initDate();
}
function initDate() {
isLeapYear=false;
oYears=document.getElementById('years'); //获得year的select
oMonths=document.getElementById('months'); //获得month的select
oDays=document.getElementById('days'); //获得day的select
initYears(); //初始化年份
//设定三个select的onChange事件
oYears.onchange=chgYear;
oMonths.onchange=chgMonth;
oDays.onchange=chgDay;
}
function initYears() {
oYears.length=1;
var cYear=new Date().getYear();
for (var i=cYear-20;i<=cYear;i++) //从当前年份前20年开始循环，可以自己更改循环区间
{
var o=new Option(i.toString(),i.toString());
oYears.add(o);
}
}
function chgYear() {
try
{
isLeapYear=false;
var year=parseInt(this.options[this.selectedIndex].value); //获得选择的年份
//判断是否是闰年，不懂公式的自己百度
if (year%4==0) isLeapYear=true;
if (year%100==0 && year%400!=0) isLeapYear=false;
if (year%100==0 && year%400==0) isLeapYear=true;
initMonths(); //为了体现联动的效果，这里没选择一次年份都初始化一次月份
}
catch(e){;}
}
function initMonths() {
oMonths.length=1;
for (var i=1;i<13;i++) //月份是1～12月
{
var o=new Option(i.toString(),i.toString());
oMonths.add(o);
}
}
function chgMonth() {
try
{
var month=this.options[this.selectedIndex].value;
if (month!='')
{
var days;
if (month.replace(/(1|3|5|7|8|10|12)/ig,'')=='') //判断是否为大月
days=31;
else if (month.replace(/(4|6|9|11)/ig,'')=='') //判断是否为小月
days=30;
else if (month=='2' && isLeapYear) //判断当是2月时，是否为闰月
days=29;
else
days=28;
initDays(days);
}
}
catch(e) {;}
}
function initDays(days) {
oDays.length=1;
for (var i=1;i<=parseInt(days);i++) //循环显示天数
{
var o=new Option(i.toString(),i.toString());
oDays.add(o);
}
}
function chgDay() {
//改变日期时，调用该函数
try
{
var year=oYears.options[oYears.selectedIndex].value;
var month=oMonths.options[oMonths.selectedIndex].value;
var day=this.options[this.selectedIndex].value;
alert('您选择了'+year+'年'+month+'月'+day+'日');
}
catch(e) {;}
}
</script>
</head>
<body>
<div>
<select id="years">
<option value="">选择年份</option>
</select>
<select id="months">
<option value="">选择月份</option>
</select>
<select id="days">
<option value="">选择日子</option>
</select>
</div>
</body>
</html>
分享到：
相关推荐
下拉列表联动 省市 日期 应有尽有，为了大家方便 拿出来分享 /* PCAS (Province City Area Selector 省、市、地区联动选择JS封装类) Ver 2.02 完整版 *\ 制作时间:2005-12-30 更新时间:2006-01-24 数据修正...
基于vue2的一个日历列表组件，类似各类旅游网站的出行日期选择控件
2、用下拉列表列出年份、月份、天数由用户选择输入。这种方法更麻烦，用户操作看似比上一种方便了，可是每一个日期输入都需要程序员在后台对年份、月份、天数一一循环列出，而且在列出前或用户输入后还是要对日期...
应用javascript实现简单的日期查询，在下拉列表中选择年月单击查询按钮即可查询当月日期。
实例063 在下拉列表中进行多选移除 106 实例064 将数组中的数据添加到下拉菜单中 107 实例065 应用下拉菜单选择所要联机的网站 108 实例066 多级级联菜单 110 实例067 可以输入文字的下拉菜单 111 实例068 根据下拉...
配图列表 列表 1 说明 1.1 主要的内容 1.2 学习目标 2 了解JavaScript 浏览器上的程序语言 2.1 JavaScript 操作对象的简单介绍-- 属性和方法 2.2 JavaScript 代码的加入 2.2.1 加入...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
它使用日期选择器创建下拉列表，您可以在一个间隔之间选择一个日期。 也可以选择一个日期范围。 用法 将此添加到您的 Gemfile 中： gem 'semantic-datepicker-rails' 将以下指令添加到您的 Javascript 清单文件 ...
6.6.html 多级下拉列表联动。 6.7.html 各种使用JavaScript获取复选框值的方法。 6.8.html JavaScript控制复选框。 6.9.html 复选框的JavaScript特效。 6.10.html JavaScript取单选框的值。 ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
js的方法定义：function方法名([参数列表]){ 方法体 [return 返回值] } 注意：js中的方法可以直接写在代码中，不需要“类”包裹 使用方法：方法名()-->方法调用-->立即执行 2.js文件：网页外专门保存js...
实例374 无刷新的级联下拉列表 614 实例375 使用XML实现不刷新页面查询数据 616 16.3 调用与控制 619 实例376 将查询结果导出到Word 619 实例377 调用Excel 621 实例378 调用PowerPoint 622 16.4 其他...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
7.2.5 下拉列表框 7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格...
2.2 短日期，形如 (2003-12-05) 2.3 长时间，形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-05,或者2003-5) 2.5 只有小时和分钟,形如(12:03) 3、表单类 3.1 所有的表单的值都不能为空 3.2 多行文本框...
它使用日期选择器创建下拉列表，您可以在一个间隔之间选择一个日期。 也可以选择一个日期范围。 用法 依赖关系 该组件依赖于 、 和 。 <link rel="stylesheet" type="text/css" href="./css/semantic/semantic...
检查卡详细信息问题设计一个网页来获取卡片的详细信息。 包括基本验证，如验证卡号和... 到期日期可以是输入文本或下拉列表。解决方案验证卡号和 CVV 将卡的详细信息存储在数据库中， 基本验证，如验证卡号和有效期使
2. 在下拉列表框里选择一个值后跳出新窗口? 3. 在JSP中启动execl? 4. 两级下拉列表框联动菜单? 5. java中如何把一个目录下的文件移到另一个指定的目录？ 6. 制作表格线? 7. jsp如判别一个字符在A到Z之间? 8. 得到一...
jSuites v4-Web组件和JavaScript插件。... 使用简单的指令，可以以不同的方式呈现该指令，例如选择框，搜索栏，移动选择器或简单列表。 表单跟踪器将有机会跟踪从基本表单到动态表单的更改，以便记住用户在离开