m0_67871155 2023-04-18 23:15 采纳率: 100%
浏览 39
已结题

JavaScript下拉框选择日期

JS实验，HTML：在这里需要打开网页就显示当前日期，但是这个代码中不能实现这个功能，而且每个月的天数都是31天，不会随着月份和年份而改变，希望帮忙修改一下。


<body>
  <select name="" id="year">
    
  </select>
  <select name="" id="month">
    
  </select>
  <select name="" id="day">
    
  </select>
  <input type="button" onclick="getDay()" value="获取日期" />
  <input type="button" onclick="aa()" value="清空" />
  <script language="javascript">
 today=new Date() 
  //添加年份
nYear=today.getFullYear()
for(var y=nYear;y>nYear-100;y--){
    l=new Option(y,y)
    document.getElementById("year").add(l)
}
 //添加月份
tmonth=parseInt(today.getMonth());
  
 for(var i=1;i<=12;i++){
     b=new Option(i,i)
     document.getElementById("month").add(b)
 }
 document.getElementById("month").options[tmonth].selected=true;//显示当前月份
  
  
  nDay=[31,28,31,30,31,30,31,31,30,31,30,31]
      function aa(){
          document.getElementById("year").options.length=0
      }
  //添加日
 today = parseInt(today.getDay());

      for (var i = 1; i <= 31; i++) {
     {
          d = new Option(i, i);
          document.getElementById("day").add(d);
        }
      }
    document.getElementById("dat").options[nDay].selected=true;  
  //获取所选日期
  function getDay(){
    var obj=document.getElementById("year")//定位id
    var index = obj.selectedIndex; // 选中索引
    var text = obj.options[index].text; // 选中文本
    var value = obj.options[index].value; // 选中值  
    alert(value) 
  }
function aa(){
       document.getElementById("year").options.length=0//选择框清空
    
}
</script>

</body>
  • 写回答

1条回答 默认 最新

  • 「已注销」 2023-04-19 01:23
    关注
    
    <body>
        <select name="" id="year" onchange="changeYear()">

        </select>
        <select name="" id="month" onchange="changeMonth()">

        </select>
        <select name="" id="day">

        </select>
        <input type="button" onclick="getSelectedDate()" value="获取日期" />
        <input type="button" onclick="clearDate()" value="清空" />
        <script language="javascript">
            // 年dom对象
            let yearDomObj = document.getElementById("year");
            // 月dom对象
            let monthDomObj = document.getElementById("month");
            // 日dom对象
            let dayDomObj = document.getElementById("day");

            /**
             * 设置 年下拉框
             * @param {number} year
             */
            function setYearOptions(year){
                // 先清空所有option
                yearDomObj.innerHTML = "";
                //添加年份
                for (let y = year; y > year - 100; y--) {
                    yearDomObj.add(new Option(y, y))
                }

                // 选中下拉框
                yearDomObj.value = year;
            }

            /**
             * 设置 月下拉框
             * @param {number} month 月（与正常的月份数字一致）
             */
            function setMonthOptions(month){
                // 先清空所有option
                monthDomObj.innerHTML = "";
                //添加月份
                for (let i = 1; i <= 12; i++) {
                    monthDomObj.add(new Option(i, i));
                }

                // 选中下拉框
                monthDomObj.value = month;
            }

            /**
             * 设置 日下拉框
             * @param {number} year 年
             * @param {number} month 月（与正常的月份数字一致）
             * @param {number} day 日
             */
            function setDayOptions(year, month, day){
                year = parseInt(year);
                month = parseInt(month);
                day = parseInt(day);

                // 月对应的天数
                let nDay = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
                if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
                    nDay[1] = 29;
                }

                // 先清空所有option
                dayDomObj.innerHTML = "";
                //添加日
                for (let i = 1; i <= nDay[month - 1]; i++) {
                    dayDomObj.add(new Option(i, i));
                }

                // 选中下拉框
                if(day <= nDay[month - 1]){
                    // 在本月天数内
                    dayDomObj.value = day;
                }else{
                    // 不在本月天数内
                    dayDomObj.value = 1;
                }
            }

            /**
             * 初始化年月日下拉框为当前日期
             */
            function initDate(){
                // 当前日期
                let today = new Date();
                // 当前年
                let curYear = today.getFullYear();
                // 当前月
                let curMonth = parseInt(today.getMonth()) + 1;
                // 当前日
                let curDay = parseInt(today.getDate());
                // 初始化 年下拉框
                setYearOptions(curYear);
                // 初始化 月下拉框
                setMonthOptions(curMonth);
                // 初始化 日下拉框
                setDayOptions(curYear, curMonth, curDay);
            };
            initDate();

            // 改变 年下拉框 事件
            function changeYear(){
                let year = yearDomObj.value;
                let month = monthDomObj.value;
                let day = dayDomObj.value;

                // 设置 日下拉框
                setDayOptions(year, month, day);
            }

            // 改变 月下拉框 事件
            function changeMonth(){
                let year = yearDomObj.value;
                let month = monthDomObj.value;
                let day = dayDomObj.value;

                // 设置 日下拉框
                setDayOptions(year, month, day);
            }

            //获取所选日期
            function getSelectedDate() {
                let yearText = yearDomObj.value;
                let monthText = monthDomObj.value;
                let dayText = dayDomObj.value;

                let dateText = yearText + " " + monthText + " " + dayText;
                alert(dateText)
            }

            // 清空
            function clearDate() {
                initDate();
            }
        </script>

    </body>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 4月27日
  • 已采纳回答 4月19日
  • 创建了问题 4月18日

悬赏问题

  • ¥15 WPF动态创建页面内容
  • ¥15 如何对TBSS的结果进行统计学的分析已完成置换检验，如何在最终的TBSS输出结果提取除具体值及如何做进一步相关性分析
  • ¥15 SQL数据库操作问题
  • ¥100 关于lm339比较电路出现的问题
  • ¥15 Matlab安装yalmip和cplex功能安装失败
  • ¥15 加装宝马安卓中控改变开机画面
  • ¥15 STK安装问题问问大家，这种情况应该怎么办
  • ¥15 关于罗技鼠标宏lua文件的问题
  • ¥15 halcon ocr mlp 识别问题
  • ¥15 已知曲线满足正余弦函数，根据其峰值，还原出整条曲线