基于JQuery的日期联动实现代码


Posted in Javascript onFebruary 24, 2011

实现目标:

基于JQuery的日期联动实现代码

两个日期,有下拉框:

<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>

参考了一些代码,希望对需要的朋友有所帮助。
Javascript 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
js关于字符长度限制的问题示例探讨
Jan 24 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 #Javascript
jquery的键盘事件修改代码
Feb 24 #Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 #Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 #Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 #Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 #Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 #Javascript
You might like
短波问题解答
2021/02/28 无线电
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
php中的strpos使用示例
2014/02/27 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript中Function()函数的使用教程
2015/06/04 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
js removeChild 方法深入理解
2016/08/16 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python气泡提示与标签的实现
2020/04/01 Python
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
建房协议书
2014/04/11 职场文书
安全先进个人材料
2014/12/29 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python