一个日期下拉菜单的实现

it2022-05-05  28

<html><head><script type="text/javascript">    function showYear(){        //获取年份对应的节点        var yearNode = document.getElementById("year");        //获取该年份对应的第一个子节点        var childYear = yearNode.childNodes[0];        //创建最早日期的对象        var dateBegin = new Date(1900,0,1);        //创建当前日期的对象        var dateNow = new Date();        //获取最早日期的年份        var yearBegin = dateBegin.getFullYear();        //获取当前日期的年份        var yearNow = dateNow.getFullYear();         //创建一个储存年份的数组并将从最早日期的年份到当前日期的年份存进去        var years = new Array();        for(;yearBegin<=yearNow;yearBegin++){            years.push(yearBegin);        }         //遍历对应的所有年份然后创建对应的option添加到year上        for(var index = 0;index<years.length;index++){            var option = document.createElement("option");            option.innerHTML = years[index];            yearNode.appendChild(option);        }    }    function showMonth(){        //获取月份对应的节点        var monthNode = document.getElementById("month");        //获取该月份对应的第一个子节点        var childMonth = monthNode.childNodes[0];        //创建一个储存月份数的数组,并将月份数存进去        var months = new Array();        for(var i = 1;i<=12;i++){            months.push(i);            }            //清除month框里的月份数据        monthNode.options.length = 1;        //遍历对应的所有月份然后创建对应的option添加到month上        for(var index = 0;index<months.length;index++){            var option = document.createElement("option");            option.innerHTML = months[index];            monthNode.appendChild(option);            }    }    function showDate(){        //获取日期对应的节点        var dateNode = document.getElementById("date");        //获取该日期对应的第一个子节点        var childDate = dateNode.childNodes[0];        //创建一个储存所选年份月份天数的数组,并将天数存进去        var days = new Array();        // 获取下拉框所选年份的数值并转为Nunber类型        var yearSelect = parseInt(document.getElementById("year").value);        // 获取下拉框所选月份的数值并转为Nunber类型        var monthSelect = parseInt(document.getElementById("month").value);        var date = new Date(yearSelect,monthSelect,0);            //获取该月的天数        var dayNumber = date.getDate();        for(var i = 1; i <= dayNumber;i++){                days.push(i);                }        //清除 date框里的日期数据        dateNode.options.length = 1;            //遍历对应的所有日期然后创建对应的option添加到date上        for(var index = 0;index<days.length;index++){            var option = document.createElement("option");            option.innerHTML = days[index];            dateNode.appendChild(option);            }    }</script><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body>年<select id="year" οnchange="showMonth()" οnclick="showYear()">        <option>年份</option>    </select>    月<select id="month" οnchange="showDate()">        <option>月份</option>    </select>    日<select id="date">        <option>日期</option>    </select></body></html>

转载于:https://www.cnblogs.com/xue-xu-hao/p/5978841.html

相关资源:jquery日期控件(有下拉菜单选择年份)

最新回复(0)