年月日 日期选择问题
<!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>
以上是老师的版本,相较有多处更加简洁的写法,值得以后借鉴