年月日日期选择问题

Posted 2020-09-13 暗杠小发

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了年月日日期选择问题相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div
            {
                height: 300px;
                width: 300px;
                margin: 0px auto;
            }
        </style>
    </head>
    <body>
        <div>
         <select id="year" onChange="a()">
               <option value="0" selected></option>
              <!--<option value="1986">1986</option>
              <option value="1987">1987</option> 
              <option value="1988">1988</option>
              <option value="1989">1989</option>
              <option value="1990">1990</option>
              <option value="1991">1991</option>
              <option value="1992">1992</option>
              <option value="1993">1993</option>
              <option value="1994">1994</option>
              <option value="1995">1995</option>
              <option value="1996">1996</option>
              <option value="1997">1997</option>
              <option value="1998">1998</option>
              <option value="1999">1999</option>
              <option value="2000">2000</option>
              <option value="2001">2001</option>
              <option value="2002">2002</option>
              <option value="2003">2003</option>
              <option value="2004">2004</option>
              <option value="2005">2005</option>
              <option value="2006">2006</option>
              <option value="2007">2007</option>
              <option value="2008">2008</option>
              <option value="2009">2009</option>
              <option value="2010">2010</option>
              <option value="2011">2011</option>
              <option value="2012">2012</option>
              <option value="2013">2013</option>
              <option value="2014">2014</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>-->
            </select>
                                年
            <select id="month" onChange="b()">   
              <option value="0"></option>
              <!--<option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>-->
            </select>
                                月
            <select id="day">                    
              <!--<option value="1" selected>1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>-->
            </select>
                        日     
            </div>
    </body>
</html>
<script>
    
    var runnian;
    var opt1=Array();
    var opt2=Array();
    var year = document.getElementById("year");
    for(var k=1980;k<=2017;k++)
            {  
                opt1[k] = document.createElement(‘option‘);
                year.value = k;
                opt1[k].innerText = k;
                year.appendChild(opt1[k]);
            }
    function a()
    {
        
     var year = document.getElementById("year");
     var month = document.getElementById("month")
     month.options.length=1;    
     var day =document.getElementById(‘day‘);
     day.options.length=0;
      
     if((year.value%4==0&&year.value%100!=0)||year.value%400==0)
     {
         runnian=true;
     }
     else
     {
         runnian=false;
     }
     for(var j=1;j<=12;j++)
            {  
                opt1[j] = document.createElement(‘option‘);
                month.value = j;
                opt1[j].innerText = j;
                month.appendChild(opt1[j]);
            }
    }

以上实现的是年月日日期时间选择（自己的版本）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
	
		<select id=‘year‘ onchange="addDay()"></select>
		<select id="month" onchange="addDay()"></select>
		<select id="date"></select>
	</body>

</html>
<script>

	var year_slt = document.getElementById(‘year‘);
	var month_slt = document.getElementById(‘month‘);
	var day_slt = document.getElementById(‘date‘);
	var now = new Date();
	now_year = now.getFullYear();

	for(var i = now_year; i >= now_year - 70; i--) {
		var opt_year = document.createElement(‘option‘);
		opt_year.value = i;
		opt_year.innerText = i;
		year_slt.appendChild(opt_year);
	}

	for(var i = 1; i <= 12; i++) {
		var opt_month = document.createElement(‘option‘);
		opt_month.value = i;
		opt_month.innerText = i;
		month_slt.appendChild(opt_month);
	}

	function isRun(year) {
		if((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
			return 29;
		} else {
			return 28
		}
	}

	function addDay() {
		day_slt.innerHTML = ‘‘;
		if(month_slt.value == 1 || month_slt.value == 3 || month_slt.value == 5 || month_slt.value == 7 || month_slt.value == 8 || month_slt.value == 10 || month_slt.value == 12) {
			for(var i = 1; i <= 31; i++) {
				var day = document.createElement(‘option‘);
				day.value = i;
				day.innerText = i;
				day_slt.appendChild(day);
			}
		} else if(month_slt.value == 4 || month_slt.value == 6 || month_slt.value == 9 || month_slt.value == 11) {
			for(var i = 1; i <= 30; i++) {
				var day = document.createElement(‘option‘);
				day.value = i;
				day.innerText = i;
				day_slt.appendChild(day);
			}
		} else {
			for(var i = 1; i <= isRun(year_slt.value); i++) {
				var day = document.createElement(‘option‘);
				day.value = i;
				day.innerText = i;
				day_slt.appendChild(day);
			}
		}

	}
</script>

　　以上是老师的版本，相较有多处更加简洁的写法，值得以后借鉴

以上是关于年月日日期选择问题的主要内容，如果未能解决你的问题，请参考以下文章

年月日日期选择问题

html如何创建一个下拉框包含年月日？

日期选择器对话框在片段中不起作用[关闭]

WPF 用TextBox和Calendar自定义可以选择年月的日期选择控件

html5怎么设置年月日选择框？

年月日 日期选择问题

年月日日期选择问题