簡體   English   中英

根據另一個下拉列表中的選定值限制日期

[英]Restrict date based on the selected value in another dropdown

在此處輸入圖片說明

我需要的是,根據期間類型中選擇的值來限制期間值下拉列表的選擇。

如果在期間類型中選擇了 ,則在期間值中 ,日期選擇將被限制為僅當年當前月份的日期。

同樣,如果選擇了月份,則日期選擇將限制為當年所有月份的日期。

如果選擇了年份,則日期選擇將沒有任何限制。

我該如何實施?

這是一個示例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/上實現此功能嗎

HTML中缺少一些代碼。 我已經做了一個月了。 JS部分還可以。 只需將ID分配給“ day”和“ year”部分。 該解決方案不是經過優化的解決方案,但可以使用。 因此,請對其進行復制並仔細查看。

    <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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM