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

Question

What I require is that the selection of dropdown in period value is restricted on basis of the selected value in period type .

If day is selected in period type , then in period value selection of dates will be resticted to dates of only the current month of the current year.

Likewise if month is selected, selection of dates will be resticted to dates of all months of current year.

If year is selected then there wont be any restriction in date selection.

How can I implement this?

Here is a sample html code.

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

Can I implement this on the following datepicker http://www.eyecon.ro/datepicker/

Answer 1

There are some missing codes in your HTML. I've done it for month. JS part is ok. Just give ids to "day" and "year" part. The solution is not a optimized one but it works. So copy and give a close look to it.

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