jQuery实现日期联动效果实例
更新时间：2016年07月26日 15:48:44 作者：轩脉刃
这篇文章主要介绍了jQuery实现日期联动效果的方法,结合实例形式分析了jQuery针对日期及页面元素动态操作的相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery实现日期联动效果的方法。分享给大家供大家参考，具体如下：
实现目标：
两个日期，有下拉框：
<head>
//导入jquery地址
<script src="jquery-1.7.2.min.js" 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>
参考了一些代码，终于能实现了~~
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery实现仿百度帖吧头部固定导航效果,涉及jquery针对页面高度计算与样式的动态添加及删除技巧,非常简单实用,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了jQuery预加载图片常用方法,以两个简单实例分析了jQuery预加载图片的实现技巧,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了JQuery中层次选择器用法,以实例形式较为详细的分析了jQuery中层次选择器的各种常见使用技巧,并备有较为详细的注释说明,需要的朋友可以参考下2015-05-05
昨天写了篇通过jQuery源码学习javascript（一），里面有一个定义对象C的方法，我早期也没有太注意这个方面的技术细节。后来我查了一下资料，发现里面有很多巧的地方。今天与大家分享2012-12-12
这篇文章主要介绍了jquery实现的Accordion折叠面板效果代码,通过jquery鼠标click事件操作页面元素样式动态变换实现手风琴折叠效果,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细介绍了jQuery Validate插件实现表单验证的相关资料，感兴趣的小伙伴们可以参考一下2016-08-08
想必大家对删除提示框并不陌生吧，也就是大家常见的弹出是否删除的对话框，下面使用jquery来实现下，感兴趣的朋友不要错过2014-01-01
本篇文章主要是对在页面上用action传递参数到后台出现乱码的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了JQuery实现样式设置、追加、移除与切换的方法,涉及jQuery样式操作的常用技巧,非常简单实用,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了60个很实用的jQuery代码开发技巧收集,使用jquery的朋友可以参考下核心代码的使用，需要的朋友可以参考下2014-12-12
最新评论