基于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 相关文章推荐
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
Express的路由详解
2015/12/10 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Javascript的this用法
2017/01/16 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
vue几个常用跨域处理方式介绍
2018/02/07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
python实用代码片段收集贴
2015/06/03 Python
Python Socket传输文件示例
2017/01/16 Python
Python 2与Python 3版本和编码的对比
2017/02/14 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python实现树形打印目录结构
2018/03/29 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Linux上使用Python统计每天的键盘输入次数
2019/04/17 Python
使用python实现简单五子棋游戏
2019/06/18 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
实习教师自我鉴定
2013/12/09 职场文书
元旦活动感言
2014/03/08 职场文书
节能减排倡议书
2014/04/15 职场文书
书香校园建设方案
2014/05/02 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL