JQuery实现日期联动

简介:

实现目标:

2011022319115633.png

两个日期,有下拉框:

复制代码
 
 
< head >
//导入jquery地址
< script src ="(Jquery地址)" language ="JavaScript" type ="text/javascript" ></ script >
< script type ="text/javascript" >
// startYear发生变化
function changeYear(str,isstart)
{
var pre = " start " ;
if (isstart == false )
{
pre
= " end " ;
}
var startMonth = $(pre + " Month " ).value;
if (startMonth == "" )
{
var e = $(pre + " Month " );
optionClear(e);
return ;
}
var n = MonHead[startMonth - 1 ];
if (startMonth == 2 && IsPinYear($(pre + " Year " ).value))
{
n
++ ;
}
writeDay(n,pre);
}
function changeMonth(str,isstart)
{
var pre = " start " ;
if (isstart == false )
{
pre
= " end " ;
}
var year = $(pre + " Year " ).value;
if (year == "" )
{
var e = $(pre + " Day " );
optionClear(e);
return ;
}
var n = MonHead[str - 1 ];
if (str == 2 && IsPinYear($(pre + " Year " )))
{
n
++ ;
}
writeDay(n,pre);
}

function dateStart()
{
var defaultStartY = " 2011 " ;
var defaultStartM = " 1 " ;
var defaultStartD = " 14 " ;

var defaultEndY = " 2011 " ;
var defaultEndM = " 2 " ;
var defaultEndD = " 23 " ;

MonHead
= [ 31 , 28 , 31 , 30 , 31 , 30 , 31 , 31 , 30 , 31 , 30 , 31 ];

var prestr = new Array( " start " , " end " );
for ( var j = 0 ; j < 2 ; j ++ )
{
var pre = prestr[j];
// start 年
var y = new Date().getFullYear();
if (pre == " start " )
{
// start初始选中前第10天
var i_index = 0 ;
for ( var i = (y - 10 ); i <= y; i ++ )
{
$(pre
+ " Year " ).options.add( new Option( "" + i + "" ,i));
if (i == defaultStartY)
{
$(pre
+ " Year " ).options[i_index].selected = true ;
}
i_index
++ ;
}

}
else
{
var i_index = 0 ;
for ( var i = (y - 5 ); i <= y + 5 ; i ++ )
{
$(pre
+ " Year " ).options.add( new Option( "" + i + "" ,i));
if (i == defaultEndY)
{
$(pre
+ " Year " ).options[i_index].selected = true ;
}
i_index
++ ;
}
}
// start月
defaultM = (pre == " start " ? defaultStartM : defaultEndM)
for ( var i = 1 ; i < 13 ; i ++ )
{
$(pre
+ " Month " ).options.add( new Option( "" + i + "" ,i));
if (i == defaultM)
{
$(pre
+ " Month " ).options[i - 1 ].selected = true ;
}
}
// start日
var n = MonHead[$(pre + " Month " ).value];
if ( new Date().getMonth == 1 && IsPinYear($(pre + " Year " ).value))
{
n
++ ;
}
defaultD
= (pre == " start " ? defaultStartD : defaultEndD)
writeDay(n,pre);
$(pre
+ " Day " ).options[defaultD - 1 ].selected = true ;
}
}
function writeDay(n,pre)
{
var e = $(pre + " Day " );
optionClear(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 % 4 == 0 ));
}

function optionClear(e)
{
for ( var i = e.options.length; i >= 0 ; i -- )
{
e.remove(i);
}
}
</ script >
</ head >
< body onload ="dateStart()" >
< p name ="selectdate" >

< select id ="startYear" name ="startYear" onchange ="changeYear(this.value,true)" >
</ select >

< select id ="startMonth" name ="startMonth" onchange ="changeMonth(this.value,true)" >
</ select >

< select id ="startDay" name ="startDay" >
</ select >


< select id ="endYear" name ="endYear" onchange ="changeYear(this.value,false)" >
</ select >

< select id ="endMonth" name ="endMonth" onchange ="changeMonth(this.value,false)" >
</ select >

< select id ="endDay" name ="endDay" >
</ select >

</ p >
</ body >
复制代码

参考了一些代码,终于能实现了~~





本文转自轩脉刃博客园博客,原文链接:http://www.cnblogs.com/yjf512/archive/2011/02/23/1962586.html,如需转载请自行联系原作者

相关文章
|
9月前
|
JavaScript 前端开发
前端基础 - JQuery实现省级联动
前端基础 - JQuery实现省级联动
37 0
|
JavaScript
jquery 实现 table 和 标题 的联动显示
jquery 实现 table 和 标题 的联动显示
109 0
jquery 实现 table 和 标题 的联动显示
|
JavaScript 前端开发 CDN
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
266 0
HTML + jQuery 实现轮播图
|
JavaScript
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
526 0
Jquery实现表格动态增加一行,删除一行(最简洁的代码实现)
|
JavaScript
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
212 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
|
前端开发 JavaScript
【jquery ajax】实现文件上传提交
【jquery ajax】实现文件上传提交
247 0
【jquery ajax】实现文件上传提交
|
JavaScript
利用jquery的attr方法一行代码实现的简单的图片切换效果
利用jquery的attr方法一行代码实现的简单的图片切换效果
143 0
利用jquery的attr方法一行代码实现的简单的图片切换效果
|
JavaScript
jquery实现单击div切换背景,再次单击回到原来样式
jquery实现单击div切换背景,再次单击回到原来样式
173 0
jquery实现单击div切换背景,再次单击回到原来样式
|
JavaScript
jQuery实现判断li的个数从而实现其他功能
jQuery实现判断li的个数从而实现其他功能
90 0
jQuery实现判断li的个数从而实现其他功能
|
JavaScript 搜索推荐 API
JQuery+ajax实现类似百度搜索自动匹配功能
JQuery+ajax实现类似百度搜索自动匹配功能
329 0
JQuery+ajax实现类似百度搜索自动匹配功能