jQuery实现日期联动效果实例


Posted in Javascript onJuly 26, 2016

本文实例讲述了jQuery实现日期联动效果的方法。分享给大家供大家参考,具体如下:

实现目标:

jQuery实现日期联动效果实例

两个日期,有下拉框:

<head>
//导入jquery地址
<script src="jquery-1.7.2.min.js" 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>

参考了一些代码,终于能实现了~~

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
WEB 浏览器兼容 推荐收藏
May 14 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
小程序绑定用户方案优化小结
May 15 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 #Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 #Javascript
JavaScript从0开始构思表情插件
Jul 26 #Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 #Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 #Javascript
js获取html的span标签的值方法(超简单)
Jul 26 #Javascript
js无法获取到html标签的属性的解决方法
Jul 26 #Javascript
You might like
具有时效性的php加密解密函数代码
2013/06/19 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
php socket通信简单实现
2016/11/18 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
PHP 8新特性简介
2020/08/18 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python赋值操作方法分享
2013/03/23 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
数字天堂软件测试面试题
2012/12/23 面试题
Unix里面如何在后台运行程序
2016/10/14 面试题
大学生如何写自荐信
2014/01/08 职场文书
出生公证书样本
2014/04/04 职场文书
儿童生日会策划方案
2014/05/15 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
企业投资意向书
2015/05/09 职场文书
Jsonp劫持学习
2021/04/01 PHP
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫