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 相关文章推荐
js实现的页面矩阵图形变换特效
Jan 26 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
vue-loader教程介绍
Jun 14 Javascript
详解Node 定时器
Feb 26 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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中strlen 函数
2016/02/27 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
多广告投放代码 推荐
2006/11/13 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python和pyqt实现360的CLable控件
2014/02/21 Python
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
python实现微信自动回复功能
2018/04/11 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python实现自动访问网页的例子
2020/02/21 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
英国第二大营养品供应商:Vitabiotics
2016/10/01 全球购物
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
质检的岗位职责
2013/11/17 职场文书
语文教学感言
2014/02/06 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
提档介绍信范文
2015/10/22 职场文书
导游词之山东红叶谷
2019/10/31 职场文书