Question

enter image description here

我需要的是，期间值中选择的下拉列表会根据期间类型中的所选值进行限制。

如果在期间类型中选择天，则在期间值中，选择日期将被重新设置为仅当前月份的日期今年。

同样，如果选择月，日期的选择将被重新设置为当年所有月份的日期。

如果选择年，则日期选择不受任何限制。

我该如何实现？

以下是html代码示例。

  <select name="month">
 <option value="1">January
 <option value="2">February
 <option value="3">March
 <option value="4">April
 <option value="5">May
 <option value="6">June
 <option value="7">July
 <option value="8">August
 <option value="9">September
 <option value="10">October
 <option value="11">November
 <option value="12">December
  </select>

  <select name="day">
 <option value="1">1
 <option value="2">2
 <option value="3">3
 <option value="4">4
 <option value="5">5
 <option value="6">6
 <option value="7">7
 <option value="8">8
 <option value="9">9
 <option value="10">10
 <option value="11">11
 <option value="12">12
 <option value="13">13
 <option value="14">14
 <option value="15">15
 <option value="16">16
 <option value="17">17
 <option value="18">18
 <option value="19">19
 <option value="20">20
 <option value="21">21
 <option value="22">22
 <option value="23">23
 <option value="24">24
 <option value="25">25
 <option value="26">26
 <option value="27">27
 <option value="28">28
 <option value="29">29
 <option value="30">30
 <option value="31">31
   </select>

   <select name="year">
 <option value="2000">2000
 <option value="2001">2001
     <option value="2002">2002
 <option value="2003">2003
 <option value="2004">2004
 <option value="2005">2005
 <option value="2006">2006
 <option value="2007">2007
 <option value="2008">2008
     <option value="2009">2009
 <option value="2010">2010
 <option value="2011">2011
 <option value="2012">2012
   </select>

我可以在以下datepicker http://www.eyecon.ro/datepicker/

上实现此功能

Answer 1

HTML中有一些缺失的代码。我已经完成了一个月。 JS部分还可以。只需给出“日”和“年”部分的ID。解决方案不是优化的解决方案，但它可以工作。所以复制并密切关注它。

    <script type="text/javascript">
var date=new Date();
function fnc(myid)
{

    value=document.getElementById(myid).innerHTML;
    if(value=='month')
    {
    month=date.getMonth();
    console.log(month)
    document.getElementById(month).selected='selected';
    document.getElementById("month").disabled=true;
    document.getElementById("day").disabled=false;
    document.getElementById("year").disabled=false;

    }
    else if(value=='day')
    {
    day=date.getDate();
    document.getElementById(day).selected='selected';
    document.getElementById("day").disabled=true;
    document.getElementById("month").disabled=false;
    document.getElementById("year").disabled=false;

    }
    else if(value=='year')
    {
    year=date.getFullYear();
    document.getElementById(year).selected='selected';
    document.getElementById("year").disabled=true;
    document.getElementById("month").disabled=false;
    document.getElementById("day").disabled=false;

    }
}
</script>
<select>
<option onclick="fnc(this.id)">select</option>
<option id="Sday" onclick="fnc(this.id)">day</option>
<option id="Smonth" onclick="fnc(this.id)">month</option>
<option id="Syear" onclick="fnc(this.id)">year</option>
</select>

<select name="month" id="month">
 <option value="1" id="0">January</option>
 <option value="2" id="1">February</option>
 <option value="3" id="2">March</option>
 <option value="4" id="3">April</option>
 <option value="5" id="4">May</option>
 <option value="6" id="5">June</option>
 <option value="7" id="6">July</option>
 <option value="8" id="7">August</option>
 <option value="9" id="8">September</option>
 <option value="10" id="9">October</option>
 <option value="11" id="10">November</option>
 <option value="12" id="11">December</option>
  </select>

  <select name="day" id="day">
 <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>
 <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>
 <option value="29">29</option>
 <option value="30">30</option>
 <option value="31">31</option>
   </select>

   <select name="year" id="year">
 <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>
   </select>

根据另一个下拉列表中的选定值限制日期

1 个答案: