年月日下拉菜单

最新推荐文章于 2022-06-11 23:26:31 发布
最新推荐文章于 2022-06-11 23:26:31 发布
阅读量1.4k 收藏 1
点赞数
文章标签： function date firefox null action html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kumon/article/details/2972810
版权

直接贴源代码了，里面有比较详细的注释。。。

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>日期下拉菜单示例</title>
    <script type="text/javascript">

        //日期选择器构造函数
        function DateSelector(selYear, selMonth, selDay)
        {
            this.selYear = selYear;
            this.selMonth = selMonth;
            this.selDay = selDay;
            this.selYear.Group = this;
            this.selMonth.Group = this;
            // 给年份、月份下拉菜单添加onchange事件处理函数
            if(window.document.all != null){
                //IE下绑定事件方法
                this.selYear.attachEvent("onchange", DateSelector.Onchange);
                this.selMonth.attachEvent("onchange", DateSelector.Onchange);
            }
            else{
                // Firefox下绑定事件方法
                this.selYear.addEventListener("change", DateSelector.Onchange, false);
                this.selMonth.addEventListener("change", DateSelector.Onchange, false);
            }
            if(arguments.length == 4) {

                // 如果传入参数个数为4，最后一个参数必须为Date对象
                this.InitSelector(arguments[3].getFullYear(), arguments[3].getMonth() + 1, arguments[3].getDate());

            } else if(arguments.length == 6) {

                 // 如果传入参数个数为6，最后三个参数必须为初始的年月日数值
                this.InitSelector(arguments[3], arguments[4], arguments[5]);

            } else {

                // 默认使用当前日期
                var dt = new Date();
                this.InitSelector(dt.getFullYear(), dt.getMonth() + 1, dt.getDate());
            }
        }

 

        // 增加一个最小年份的属性
        DateSelector.prototype.MinYear = (new Date()).getFullYear();
        // 增加一个最大年份的属性
        DateSelector.prototype.MaxYear = 2020;

 

        // 初始化年份
        DateSelector.prototype.InitYearSelect = function() {
            // 循环添加OPION元素到年份select对象中
            for(var i = this.MinYear; i <= this.MaxYear; i++) {
                // 新建一个OPTION对象
                var op = window.document.createElement("OPTION");
                // 设置OPTION对象的值
                op.value = i;
                // 设置OPTION对象的内容
                op.innerHTML = i;
                // 添加到年份select对象
                this.selYear.appendChild(op);
            }
        }

        // 初始化月份
        DateSelector.prototype.InitMonthSelect = function() {
            // 循环添加OPION元素到月份select对象中
            for(var i = 1; i < 13; i++)
            {
                // 新建一个OPTION对象
                var op = window.document.createElement("OPTION");
                // 设置OPTION对象的值
                op.value = i;
                // 设置OPTION对象的内容
                op.innerHTML = i;
                // 添加到月份select对象
                this.selMonth.appendChild(op);
            }
        }

        // 根据年份与月份获取当月的天数
        DateSelector.DaysInMonth = function(year, month) {
            var date = new Date(year, month, 0);
            return date.getDate();
        }

        // 初始化天数
        DateSelector.prototype.InitDaySelect = function() {
            // 使用parseInt函数获取当前的年份和月份
            var year = parseInt(this.selYear.value);
            var month = parseInt(this.selMonth.value);
           
            // 获取当月的天数
            var daysInMonth = DateSelector.DaysInMonth(year, month);
           
            // 清空原有的选项
            this.selDay.options.length = 0;
            // 循环添加OPION元素到天数select对象中
            for(var i = 1; i <= daysInMonth ; i++) {
                // 新建一个OPTION对象
                var op = window.document.createElement("OPTION");
                // 设置OPTION对象的值
                op.value = i;
                // 设置OPTION对象的内容
                op.innerHTML = i;
                // 添加到天数select对象
                this.selDay.appendChild(op);
            }
        }

        // 处理年份和月份onchange事件的方法，它获取事件来源对象       

        // 并调用它的Group对象提供的InitDaySelect方法重新初始化天数
        // 参数e为event对象
        DateSelector.Onchange = function(e) {
            var selector = window.document.all != null ? e.srcElement : e.target;
            selector.Group.InitDaySelect();
        }

        // 根据参数初始化下拉菜单选项
        DateSelector.prototype.InitSelector = function(year, month, day) {
            // 由于外部可以调用这个方法，因此在这里也要将selYear和selMonth的选项清空
            // 另外因为InitDaySelect方法已经有清空天数下拉菜单，因此这里就不用重复工作了
            this.selYear.options.length = 0;
            this.selMonth.options.length = 0;
           
            // 初始化年、月
            this.InitYearSelect();
            this.InitMonthSelect();
           
            // 设置年、月初始值
            this.selYear.selectedIndex = this.MinYear - year;
            this.selMonth.selectedIndex = month - 1;
           
            // 初始化天数
            this.InitDaySelect();
           
            // 设置天数初始值
            this.selDay.selectedIndex = day - 1;
        }
    </script>
</head>
<body>
    <form id="form1" action="">
        <select id="selYear"></select>年

        <select id="selMonth"></select>月

        <select id="selDay"></select>日
    </form>
</body>
</html>
<script type="text/javascript">
    var selYear = window.document.getElementById("selYear");
    var selMonth = window.document.getElementById("selMonth");
    var selDay = window.document.getElementById("selDay");
    var now = new Date();
    //以下三个效果等同，都是默认为当前日期
    new DateSelector(selYear,selMonth,selDay);
    //new DateSelector(selYear, selMonth ,selDay, now);
    //new DateSelector(selYear, selMonth ,selDay, now.getFullYear(), now.getMonth()+1, now.getDate());
</script>

Kumon
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java用下拉框实现出生日期_纯JS实现出生日期[年月日]下拉菜单效果
weixin_34768019的博客
03-02 1235
在制作网页时，可能需要给用户提供注册帐号页面，用户注册 设计很多信息，其中就有 关于出生日期的，出于用户体验，不想让用户手动输入，而HTML5的date，目前很多浏览器支持的并不是很好，所以就可以用JS实现年、月、日3个下拉框的日期选择。具体代码如下：1、新建一个js文件，如birthday.js;function DateSelector(selYear, selMonth, selDay) {...
java月份下拉菜单_实现一个日期下拉菜单
weixin_35935712的博客
02-13 1065
这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理，实例是实现一个日期选择下拉菜单。本文调试环境为IE6/firefox1.5。首先来分析一下日期下拉菜单的需求。建议大家在写任何程序的时候都应该在动手编程之前想清楚自己需要些什么，这样编程才有效率。年份： 一般来说有一个有效年份，比如说1900年至当前年份才是为效的，这个要根据实际需求来确定，如果是该下拉菜单是用来选择出生年月...
js年月日下拉列表联动
03-17
js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动
JS实现年月日三级联动
weixin_30707875的博客
07-21 563
所谓联动就是本身的改变受上下级元素影响，常见的多级联动运用在选择年月日，选择国家地区，购物筛选等等，本案例实现的是年月日的三级联动，原生js实现，效果如上图。 大多说多级联动数据都是来自后台数据库的多维数组或者本地数据表，道理大同小异，无外乎js判断上下级关系，获取子父索引关系。本例的年月日也是如此。 年和月好解决，不受谁影响，主要是每月天数受年月影响，闰...
JavaScript实现年月日三级联动
an_gentle_killer的博客
06-16 472
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>年月日三级联动</title> </head> <body onload="initYear(),initMonth()"> <select id="year"></select>年 <select id="month" onc.
年月日三联动下拉框
weixin_30915275的博客
05-27 89
<HTML> <HEAD> <title>年月日三联动下拉框</title> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'> <meta name='author' content='http:/...
年月日三级级联
weixin_30423977的博客
10-07 99
<html><head><title>年月日三下拉框联动</title><metahttp-equiv='Content-Type'content='text/html;charset=gb2312'><metaname='author'content='GBK(tzol)//www.baidu.com'></...
JavaScript实践——年月日下拉菜单
03-16
在JavaScript实践中，创建一个年月日下拉菜单可以极大地提升用户界面的交互性和用户体验。这样的设计常见于在线表单或日期选择器中，允许用户快速、准确地选择日期，而无需手动输入。以下是对这个实践的详细解释： ...
年月日三下拉框联动
03-16
标题“年月日三下拉框联动”涉及的是在网页前端开发中常见的一种交互设计，通常用于日期选择功能。这种设计允许用户通过三个独立的下拉框分别选择年、月和日，形成一个完整的日期输入。这样的方式既方便用户操作，也...
纯JS实现出生日期[年月日]下拉菜单效果
12-02
由于HTML5的`<input type="date">`在某些浏览器中兼容性不佳，我们可以利用JavaScript（JS）来构建一个自定义的年、月、日下拉菜单。下面我们将详细解析如何使用JS实现这个功能。 首先，我们需要创建一个新的JS文件...
使用纯JS实现年月日的三级联动
xiaoweids的博客
06-11 546
转自：微点阅读 https://www.weidianyuedu.com 年月日三下拉框联动 年
JS实现自己想要日期级联的某年某月的天数
niepxiya的博客
12-20 1722
JS实现自己想要日期级联的某年某月的天数        有时候，我们并不想要每个月天数一样，或者是不需要非得根据年月来实现该月有多少天，想要实现每个月有几天由自己定义。在这里我实现了一个这样的日期级联，定义属于自己的日期。     使用的初始的日期级联的网址是：http://www.cnblogs.com/xcxc/archive/2013/03/11/2953556.html   
js年月日三级联动
始于足下
03-16 415
三级联动-年月日 var year=new Date().getFullYear();
JavaScript 年月日级联下拉列表框
lilp_ndsc的专栏
08-31 2543
下面是一个年月日用JS动态改变天数的例子代码: MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    function yearChanged(year,type){   var month=;   if(type==start)    month = document.getElementById("star
JavaScript年月日三级联动
不是秃头的程序员小李
03-15 1037
年月日三级联动 首先我们要做三个下拉框 就要用到 然后这回我们不用在一个一个写 非常的麻烦 我们要在js中创建new Option()对象 通过x.options.add(new Option(text,value)) 增加option 这里的x是我们获取的id名称x= document.getElementById("。。。"); 然后月和年是一样的 我们日是根据年和月来定的 比如 一
javascript：Date篇之实现年、月、日下拉列表框的三级联动
chenghuijin6597的博客
02-16 302
<html> <head> </head> <body> <select id="y"></select><select id="m"></select><select i...
用JS实现年月日的联动
倾城一笑stu
06-25 3113
直接上代码 用JS实现年月日的联动 var date=new Date(); //先new出一个date对象 for(var i=1970;i<=date.getFullYear();i++){ //获取当前年份 document.write(""+i+"年"); //循环输出年份，2000是指网页初始时显示的年份 } for(var i=1;i<=
js实现的年月日三级联动
weiweichen的专栏
04-25 326
[code="java"]年默认加载到距离当前100年的年份，同时根据月份是否是闰年自动加载天数。。。 出生日期： var date=new Date(); var year=date...
非常简单的javascript年-月-日三级联动下拉框
Cui55的专栏
07-07 1950
　　　　年月日三下拉框联动　　　　　　　　　　 <!--　　 function initDate(year,month,day)　　 { //每个月的初始天数　　 MonDays = [31, 28, 31, 30, 31, 30, 31, 31, 30,
html年月联动选择下拉菜单
最新发布
05-25
HTML 年月联动选择下拉菜单可以通过 JavaScript 实现。具体实现步骤如下： 1. 在 HTML 中定义年份和月份的下拉菜单。 ```html <select id="year"> <option value="">请选择年份</option> <option value="2021">2021年</option> <option value="2022">2022年</option> <!-- 其他年份选项 --> </select> <select id="month"> <option value="">请选择月份</option> <option value="1">1月</option> <option value="2">2月</option> <!-- 其他月份选项 --> </select> ``` 2. 在 JavaScript 中定义一个函数，用于根据选择的年份和月份生成日期选项列表。 ```javascript function generateDays() { var year = document.getElementById("year").value; var month = document.getElementById("month").value; var days = new Date(year, month, 0).getDate(); // 获取指定年份月份的天数 var daySelect = document.getElementById("day"); daySelect.innerHTML = "<option value=''>请选择日期</option>"; for (var i = 1; i <= days; i++) { var option = document.createElement("option"); option.value = i; option.text = i + "日"; daySelect.appendChild(option); } } ``` 3. 在 HTML 中为年份和月份的下拉菜单绑定 onchange 事件，当选择项发生变化时调用生成日期选项列表的函数。 ```html <select id="year" onchange="generateDays()"> <!-- 选项列表 --> </select> <select id="month" onchange="generateDays()"> <!-- 选项列表 --> </select> <select id="day"> <option value="">请选择日期</option> <!-- 日期选项列表由 JavaScript 生成 --> </select> ``` 这样就可以实现 HTML 年月联动选择下拉菜单了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值