jQuery实现日期联动效果实例
2016-07-26 15:48
906 查看
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- oracle sql日期比较
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作