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 相关文章推荐
jQuery编写widget的一些技巧分享
Oct 28 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
js图片卷帘门导航菜单特效代码分享
Sep 10 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
Oct 20 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
浅谈webpack devtool里的7种SourceMap模式
Jan 14 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP操作文件方法问答
2007/03/16 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
javascript调试说明
2010/06/07 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
2016/07/19 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Python 列表list使用介绍
2014/11/30 Python
python入门教程之识别验证码
2017/03/04 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python五子棋游戏的设计与实现
2019/06/18 Python
详细分析Python collections工具库
2020/07/16 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
python 爬取小说并下载的示例
2020/12/07 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
navabi英国:设计师大码女装
2019/06/25 全球购物
公务员培训自我鉴定
2013/09/19 职场文书
销售员岗位职责
2014/06/09 职场文书
长城导游词300字
2015/01/30 职场文书
义诊活动通知
2015/04/24 职场文书
邹越演讲观后感
2015/06/15 职场文书