jQuery实现日期联动效果实例

2019-11-20 09:24:49

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JS中的数组方法笔记整理

下一篇：一种基于浏览器的自动小票机打印实现方案(js版)