年月日三级联动（纯JS）

最新推荐文章于 2022-06-11 23:26:31 发布
最新推荐文章于 2022-06-11 23:26:31 发布
阅读量346 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wg200/article/details/51836089
版权
<script type="text/javascript" src="jquery-1.8.3.js"></script>

<script type="text/javascript">

    var currentDate = new Date();

    var currentYear;

    var currentMonth;

    $(function(){

        renderYearSelect();

        renderMonthSelect();

        renderDaySelect(currentMonth);
    })

    // 生成【年份】下拉框的内容
    function renderYearSelect(){
        
        currentYear = currentDate.getFullYear();

        for(var i = currentYear - 50; i < currentYear + 10; i++){
            $("#yearSelect").append("<option>"+i+"</option>");
        }

        $("#yearSelect option[value="+currentYear+"]").attr("selected", "selected");
    }

    function renderMonthSelect(){

        currentMonth = currentDate.getMonth() + 1;

        for(var i = 1; i <= 12; i++){
            $("#monthSelect").append("<option value="+i+">"+i+"</option>");
        }

        $("#monthSelect option[value="+currentMonth+"]").attr("selected", "selected");

    }

    // 生成【日】下拉框的内容    
    function renderDaySelect(month){

        $("#daySelect").empty();

        var currentDays = computeDays(month);
        
        for(var i = 1; i <= currentDays; i++){
            $("#daySelect").append("<option>"+i+"</option>");
        }


    }

    function computeDays(month){
        
        if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
            return 31;
        }
        else if(month == 4 || month == 6 || month == 9 || month == 11){
            return 30;
        }
        else{
            if( isLeapYear(currentYear)){
                return 29;
            }
            else{
                return 28;
            }
        }
    }

    function isLeapYear(year){

        if(year % 400 == 0){
            return true;
        }
        else if (year % 4 == 0 && year % 100 != 0)
        {
            return true;
        }
        else{
            return false;
        }
    }

    function changeMonth(){

        currentMonth = $("#monthSelect").val();
        
        renderDaySelect(currentMonth);
    }

    function changeYear(){

        currentYear = $("#yearSelect").val();

        changeMonth();
    }


</script>


<body>

<select id="yearSelect" style="width:100px;" οnchange="changeYear()">
</select>

<select id="monthSelect" οnchange="changeMonth()">
</select>

<select id="daySelect">
</select>

</body>





wg200
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现年月日联动功能
RoddyLD的博客
03-20 1296
js实现年月日联动功能 实现年月日联动最核心的就是要判断每个月份的天数，月份的天数可能是28或29或30或31天。然后通过appendChild()方法和getElementByID()方法实现年月日的联动功能。 具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
【vue的事件处理，实现年月日三级联动】
weixin_37932555的博客
03-05 1354
本节主要演示的是vue的事件，通过单击事件，change事件等学会事件使用的方法
JS实现年月日三级联动
weixin_30707875的博客
07-21 557
所谓联动就是本身的改变受上下级元素影响，常见的多级联动运用在选择年月日，选择国家地区，购物筛选等等，本案例实现的是年月日的三级联动，原生js实现，效果如上图。 大多说多级联动数据都是来自后台数据库的多维数组或者本地数据表，道理大同小异，无外乎js判断上下级关系，获取子父索引关系。本例的年月日也是如此。 年和月好解决，不受谁影响，主要是每月天数受年月影响，闰...
vue 年月日三级联动
lzt199931415926的博客
12-02 2269
1 年月日三级联动时一般是以当前时间开始.所以第一步获取当前年月日。 2 根据年月计算出日期。 3 在年份改变时计算出当月的日期。 4 在月份改变时根据年份和月份计算日期。 5 一个简单年月日联动就搞定了，在复杂一点就是在月份滑动一周时年份加一年，相应的日期也改变，在日期滑动一周时，月份改变，年份也有可能改变，（**年12月,最后一天）这种日期滑动一周年份需要改变。 export default ...
年月日的三级联动
weixin_30300523的博客
05-19 243
<input type="text" id="hs"> <input type="button" id="btn" value="提交"> <span id="rent"></span> 这个年月日的三级联动 主要是用的select标签 var str = "<select id='year'></select&g...
YMDClass年月日三级联动纯JS封装类精简插件
02-22
【标题】"YMDClass年月日三级联动纯JS封装类精简插件"是一个用于网页表单的日期选择组件，旨在实现用户友好的交互体验。这个插件使用JavaScript编程语言，无需依赖其他库如jQuery，因此在轻量级项目中尤为适用。它...
前端年月日三级联动用到的js文件data.zip
04-21
"前端年月日三级联动用到的js文件data.zip"是一个压缩包，其中包含了实现这种功能的JavaScript代码。这个组件在网页表单、事件预订、日期选择器等场景中非常常见，它能帮助用户方便地选取精确的日期。 首先，我们要...
年月日三级联动纯JS封装类精简插件
04-19
年月日联动下拉选择JS封装类。纯JS手工打造，绿色有机无污染，简单实用。实例化示例： new YMDselect('year1','month1'); new YMDselect('year1','month1','day1'); new YMDselect('year1','month1','day1',1990,2,...
js实现年月日表单三级联动
10-20
本文将详细讲解如何使用JavaScript实现年月日表单的三级联动，以生日栏为例。 1. **HTML结构**： 首先，我们需要在HTML中定义三个`<select>`元素，分别代表年、月、日，并为每个`<select>`设置唯一的ID，如`sel1`...
JS年月日三级联动下拉框日期选择特效代码
03-20
"JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式，它通过JavaScript（JS）来创建一个包含年、月、日的三级下拉菜单，用户可以逐级选择，形成一个完整的日期。这种设计既简洁又直观，特别适用于那些...
javascript经典年月日三级联动
11-27
经典年月日三级联动 <html> <head> <title>年月日三下拉框联动 </title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> </head> <body> <form name=form1> <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.form1.YYYY.options.add(new Option(" "+ i +" 年", i)); //赋月份的下拉框 for (var i = 1; i < 13; i++) document.form1.MM.options.add(new Option(" " + i + " 月", i)); document.form1.YYYY.value = y; document.form1.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.form1.DD.value = new Date().getDate(); } if(document.attachEvent) window.attachEvent("onload", YYYYMMDDstart); else window.addEventListener('load', YYYYMMDDstart, false); function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[MMvalue - 1]; if (MMvalue ==2 && IsPinYear(str)) n++; writeDay(n) } function MMDD(str) //月发生变化时日期联动 { var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value; if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;} var n = MonHead[str - 1]; if (str ==2 && IsPinYear(YYYYvalue)) n++; writeDay(n) } function writeDay(n) //据条件写日期的下拉框 { var e = document.form1.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>
利用select实现年月日三级联动的日期选择效果【推荐】
08-31
关于select控件，可能年月日三级联动的日期选择效果是最常见的应用了。本文将对日期选择效果进行详细介绍。需要的朋友一起来看下吧
javaScript 实现的年月日三级联动
03-18
NULL 博文链接：https://zhouxianglh.iteye.com/blog/678531
jquery实现日期年月日三级联动插件
07-17
自写的jquery日期年月日三级联动插件，效果很好用，博客里面告知引用办法：http://blog.csdn.net/kabulore 有任何疑问请联系QQ：1740437
jQuery年月日三级联动(生日)
04-10
若是想看详细教程 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。 本文介绍大家如何使用jQuery来实现年月日，以表单生日为例。 更多精品jQuery特效：http://www.sucaihuo.com/js 高手可以欣赏，新手可以学习^_^
使用纯JS实现年月日的三级联动
xiaoweids的博客
06-11 535
转自：微点阅读 https://www.weidianyuedu.com 年月日三下拉框联动 年
年月日三级联动菜单
飞雁阁
09-05 296
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;title&gt;日期下拉菜单示例&lt;/title&
js日期选择年月日三级联动实现
LiMing_0820的博客
11-20 3857
HTML：             请选择 年                 选择 月                 选择 日     js: //年月日三级联动处理 var changeDD = 1;// ->一个全局变量 YYYYMMDDstart(); function YYYYMMDDstart() { MonHead =
android三级联动时间选择器
最新发布
04-27
Android三级联动时间选择器是一款方便用户选择时间的工具，可以通过滑动进行年、月、日的选择，并且可以设置起始时间和结束时间的范围，使得用户能够更加快捷方便地选择时间。 该时间选择器的设计理念是以简洁、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值