基于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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
js实现一个页面多个倒计时的3种方法
Feb 25 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
微信小程序工具函数封装
Oct 28 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批量生成随机用户名
2008/07/10 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
文明工地标语
2014/06/16 职场文书
新郎新娘答谢词
2015/01/04 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
python实现批量移动文件
2021/04/05 Python
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS