原生 javascript 实现的年月日三级联动,可以完美的判断大小月、闰年的二月份等。

效果

代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>javascript实现年月日三级联动-码农资源网(www.codesou.cn)</title>
  </head>

  <body>
    <select name="year"></select>
    <select name="month"></select>
    <select name="day"></select>
  </body>

  <script>
      SYT="-选择年份-";
      SMT="-选择月份-";
      SDT="-选择日期-";
      BYN=50;//年份范围往前n年
      AYN=5;//年份范围往后n年
      function YMDselect(){
          this.SelY=document.getElementsByName(arguments[0])[0];
          this.SelM=document.getElementsByName(arguments[1])[0];
          this.SelD=document.getElementsByName(arguments[2])[0];
          this.DefY=this.SelD?arguments[3]:arguments[2];
          this.DefM=this.SelD?arguments[4]:arguments[3];
          this.DefD=this.SelD?arguments[5]:arguments[4];
          this.SelY.YMD=this;
          this.SelM.YMD=this;
          this.SelY.onchange=function(){YMDselect.SetM(this.YMD)};
          if(this.SelD)this.SelM.onchange=function(){YMDselect.SetD(this.YMD)};
          YMDselect.SetY(this)
      };
      //设置年份
      YMDselect.SetY=function(YMD){
          dDate = new Date();
          dCurYear = dDate.getFullYear();
          YMD.SelY.options.add(new Option(SYT,'0'));
          for(i = dCurYear+AYN; i>(dCurYear-BYN); i--){
              YMDYT=i+'年';
              YMDYV=i;
              OptY = new Option(YMDYT,YMDYV);
              YMD.SelY.options.add(OptY);
              if(YMD.DefY==YMDYV) OptY.selected=true
          }
          YMDselect.SetM(YMD)
      };
      //设置月份
      YMDselect.SetM=function(YMD){
          YMD.SelM.length = 0;
          YMD.SelM.options.add(new Option(SMT,'0'));
          if(YMD.SelY.value>0){
              for(var i=1;i<=12;i++){
                  YMDMT=i+'月';
                  YMDMV=i;
                  OptM=new Option(YMDMT,YMDMV);
                  YMD.SelM.options.add(OptM);
                  if(YMD.DefM==YMDMV) OptM.selected=true
              }
          }
          if(YMD.SelD)YMDselect.SetD(YMD)
      };
      //设置日期
      YMDselect.SetD=function(YMD){
          YI=YMD.SelY.value;
          MI=YMD.SelM.value;
          YMD.SelD.length = 0;
          YMD.SelD.options.add(new Option(SDT,'0'));
          if(YI>0 && MI>0){
              dPrevDate = new Date(YI, MI, 0);
              daysInMonth=dPrevDate.getDate();
              for (d = 1; d <= parseInt(daysInMonth); d++) {
                  YMDDT=d+'日';
                  YMDDV=d;
                  OptD=new Option(YMDDT,YMDDV);
                  YMD.SelD.options.add(OptD);
                  if(YMD.DefD==YMDDV)OptD.selected=true
              }
          }
      }

      new YMDselect('year','month','day');
  </script>
</html>

使用说明

/**
* 年、月二级联动
* new YMDselect('year','month');
* new YMDselect('year','month',2010); //默认2010
* new YMDselect('year','month',2010,2); //默认2010年2月
**/
/**
* 年、月、日三级联动
* new YMDselect('year','month','day');
* new YMDselect('year','month','day',2020); //默认20020年
* new YMDselect('year','month','day',2020,6); //默认20020年6月
* new YMDselect('year','month','day',2020,6,22); //默认20020年6月22日
**/