基于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 相关文章推荐
js保存当前路径(cookies记录)
Dec 14 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jquery将一个表单序列化为一个对象的方法
Jan 03 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
关于小程序优化的一些建议(小结)
Dec 10 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
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
php数组查找函数总结
2014/11/18 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
JS验证不重复验证码
2017/02/10 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
Mac下安装vue
2018/04/11 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
python3 shelve模块的详解
2017/07/08 Python
使用Python调取任意数字资产钱包余额功能
2019/08/15 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Django 自定义分页器的实现代码
2019/11/24 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
百联网上商城:i百联
2017/01/28 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
报名委托书
2015/01/29 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
create-react-app开发常用配置教程
2022/06/25 Javascript