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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
js的一些常用方法小结
Jun 29 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
jQuery操作元素css样式的三种方法
Jun 04 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
小程序云开发部署攻略(图文教程)
Oct 30 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
一种基于浏览器的自动小票机打印实现方案(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+mysql写的留言本
2006/10/09 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
PHP-Java-Bridge使用笔记
2014/09/22 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
js用图作提交按钮或超连接
2008/03/26 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
Python使用Tkinter实现滚动抽奖器效果
2020/01/06 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
PyQt实现计数器的方法示例
2021/01/18 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
如何设置Java的运行环境
2013/04/05 面试题
2019史上最全Database工程师题库
2015/12/06 面试题
DTD的含义以及作用
2014/01/26 面试题
架构师岗位职责
2013/11/18 职场文书
打架检讨书500字
2014/01/29 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2016年母亲节广告语
2016/01/28 职场文书
英语教学课后反思
2016/02/15 职场文书
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android