JS年月日三级联动下拉框日期选择代码

最新推荐文章于 2022-07-12 17:22:08 发布

df13131

最新推荐文章于 2022-07-12 17:22:08 发布

阅读量125

点赞数

原文链接：http://www.cnblogs.com/gdcgy/p/5467742.html

版权

个人博客地址：雨中的鱼-前端知识分享 http://www.showhtml5.cc 分享干货，有兴趣的人可以一起来分享前端知识加Q群：440279380

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
       <meta charset="UTF-8"/>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <title>JS年月日三级联动下拉框日期选择代码</title>
   </head>

   <body>

       <form name="reg_testdate">
           <select name="YYYY" onChange="YYYYDD(this.value)">
               <option value="">请选择年</option>
           </select>
           <select name="MM" onChange="MMDD(this.value)">
               <option value="">选择月</option>
           </select>
           <select name="DD">
               <option value="">选择日</option>
           </select>
       </form>

       <script language="JavaScript">
           function YYYYMMDDstart() {
               MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
               //先给年下拉框赋内容
               var y = new Date().getFullYear();
               for (var i = (y - 30); i < (y + 30); i++) //以今年为准，前30年，后30年
                   document.reg_testdate.YYYY.options.add(new Option(" " + i + " 年", i));
               //赋月份的下拉框
               for (var i = 1; i < 13; i++)
                   document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
               document.reg_testdate.YYYY.value = y;
               document.reg_testdate.MM.value = new Date().getMonth() + 1;
               var n = MonHead[new Date().getMonth()];
               if (new Date().getMonth() == 1 && IsPinYear(YYYYvalue)) n++;
               writeDay(n); //赋日期下拉框Author:meizz
               document.reg_testdate.DD.value = new Date().getDate();
           }
           if (document.attachEvent)
               window.attachEvent("onload", YYYYMMDDstart);
           else
               window.addEventListener('load', YYYYMMDDstart, false);

           function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
           {
               var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
               if (MMvalue == "") {
                   var e = document.reg_testdate.DD;
                   optionsClear(e);
                   return;
               }
               var n = MonHead[MMvalue - 1];
               if (MMvalue == 2 && IsPinYear(str)) n++;
               writeDay(n)
           }

           function MMDD(str) //月发生变化时日期联动
           {
               var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
               if (YYYYvalue == "") {
                   var e = document.reg_testdate.DD;
                   optionsClear(e);
                   return;
               }
               var n = MonHead[str - 1];
               if (str == 2 && IsPinYear(YYYYvalue)) n++;
               writeDay(n)
           }

           function writeDay(n) //据条件写日期的下拉框
           {
               var e = document.reg_testdate.DD;
               optionsClear(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 % 400 == 0));
           }

           function optionsClear(e) {
               e.options.length = 1;
           }
       </script>
   </body>

</html>

转载于:https://www.cnblogs.com/gdcgy/p/5467742.html

df13131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS年月日三级联动下拉框日期选择代码

个人博客地址：雨中的鱼-前端知识分享 http://www.showhtml5.cc 分享干货，有兴趣的人可以一起来分享前端知识加Q群：440279380 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x...
复制链接

扫一扫