jQuery实现日期联动效果实例

前端技术 2023/09/08 JavaScript

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

本文地址：https://www.stayed.cn/item/21800

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案