基于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 UI皮肤定制
Jul 27 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
window.onload与$(document).ready()的区别分析
May 30 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
vue+axios实现post文件下载
Sep 25 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查看session内容的函数
2008/08/27 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
PHP中each与list用法分析
2016/01/08 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
使用jquery实现的循环连续可停顿滚动实例
2016/11/23 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
基于python 凸包问题的解决
2020/04/16 Python
python MD5加密的示例
2020/10/19 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
JAVA招聘远程笔试题
2015/07/23 面试题
农救科工作职责
2013/11/27 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
学校清明节活动总结
2014/07/04 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android