how to fix the number of days o february days selection with my code below-CodePudding

im am making a birthday registration form

Help me im trying to fix the date selection of february in every quarter year / year that has equivalent to zero like 2020 when year 2020 % 4 == 0 the number of february must have 29 days else 28 days only

my code is not working properly when the year was change it will not return back to 28 when i select the 2021 option and other option

but when i reselect the month to february the code is working.

i dont know what is wrong. the problem is when i change the year selection.

var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31],
    today = new Date(),
    // default targetDate is christmas
    targetDate = new Date(today.getFullYear(), 11, 25); 
window.onload = ()=>{
        setDate(targetDate); 
        setYears(60) // set the last five years in dropdown
        
    //if the month change set the number of days
        $("#select-month").change(function() {
          var monthIndex = $("#select-month").val();
          setDays(monthIndex);
      
      //this code only works
      var year = $('#select-year').val();
        //in every quarter year the february days must have 29 days
        if(parseInt(year) % 4 == 0){
          daysInMonth[1] = 29;
      } else {
          daysInMonth[1] = 28;
      }
  
        });
    
     $("#b_year").change( ()=>{ 
        //but this one is not and this is my problem
        var year = $('#select-year').val(); 
    //in every quarter year the february days must have 29 days
      if(parseInt(year) % 4 == 0){
        daysInMonth[1] = 29;
    } else {
        daysInMonth[1] = 28;
    }
    console.log(daysInMonth[1]);//but ive got a correct result
    })

        function setDate(date) {
          setDays(date.getMonth());
          $("#select-day").val(date.getDate());
          $("#select-month").val(date.getMonth());
          $("#select-year").val(date.getFullYear()); 
        }

        // make sure the number of days correspond with the selected month
        function setDays(monthIndex) {
          var optionCount = $('#select-day option').length,//get the length of days
              daysCount = daysInMonth[monthIndex];
          
          if (optionCount < daysCount) {//put a option data
            for (var i = optionCount; i < daysCount; i  ) {
              $('#select-day').append($("<option></option>").attr("value", i   1).text(i   1)); 
            }
          }
          else { // else delete all option data
            for (var i = daysCount; i < optionCount; i  ) {
              var optionItem = '#select-day option[value='   (i 1)   ']';
              $(optionItem).remove();
            } 
          } 
        }

        function setYears(val) {
          var year = today.getFullYear();
          for (var i = 0; i < val; i  ) {
              $('#select-year')
                .append($("<option></option>")
                .attr("value", year - i)
                .text(year - i)); 
            }
        }
}

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <select id="select-day"></select>
  <select id="select-month">
      <option value="0">January
        <option value="1">February
      <option value="2">March
      <option value="3">April
      <option value="4">May
      <option value="5">June
      <option value="6">July
      <option value="7">August
      <option value="8">September
      <option value="9">October
      <option value="10">November
      <option value="11">December
  </select>
  <select id="select-year"></select>
</div>
<script src="jquery.js"></script>
<script src="dropdown_date.js"></script>

CodePudding user response：

You were selecting the wrong element instead of #select-year when addressing the years dropdown. Plus you were not updating the days dropdown also when the year change event occurred. So without changing too much your code, I only added the logic to make it work correctly touching the two things I cited above.

I removed all your comments so that the only comments you'll find in this demo are about what I changed to your code at the slightest minimum to make it behave correctly.

var daysInMonth = [31,28,31,30,31,30,31,31,30,31,30,31],
    today = new Date(),    
    targetDate = new Date(today.getFullYear(), 11, 25); 
    
window.onload = ()=>{
  setDate(targetDate); 
  setYears(60);
          
  $("#select-month").change(function() {
    var monthIndex = $("#select-month").val();
    setDays(monthIndex);
          
    var year = $('#select-year').val();      
    if(parseInt(year) % 4 == 0){
        daysInMonth[1] = 29;
    } else {
        daysInMonth[1] = 28;
    }  
  });
    
  //you were using a wrong selector here
  $("#select-year").change( ()=>{     
    var year = $('#select-year').val();     
    if(parseInt(year) % 4 == 0){    
      daysInMonth[1] = 29;
    } else {
      daysInMonth[1] = 28;
    }
    
    //now refresh the days set in the corresponding dropdown
    //since the event of changing the years might have changed the daysInMonth
    var monthIndex = $("#select-month").val();
    setDays(monthIndex);    
  })

  function setDate(date) {
    setDays(date.getMonth());
    $("#select-day").val(date.getDate());
    $("#select-month").val(date.getMonth());
    $("#select-year").val(date.getFullYear()); 
  }
  
  function setDays(monthIndex) {
    var optionCount = $('#select-day option').length,
        daysCount = daysInMonth[monthIndex];
      
    if (optionCount < daysCount) {   
      for (var i = optionCount; i < daysCount; i  ) {
        $('#select-day').append($("<option></option>").attr("value", i   1).text(i   1)); 
      }
    }   
    else {
      for (var i = daysCount; i < optionCount; i  ) {
        var optionItem = '#select-day option[value='   (i 1)   ']';
        $(optionItem).remove();
      } 
    } 
  }

  function setYears(val) {
    var year = today.getFullYear();
    for (var i = 0; i < val; i  ) {
        $('#select-year')
          .append($("<option></option>")
          .attr("value", year - i)
          .text(year - i)); 
      }
  }
}

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

CodePudding user response：

I would suggest that, rather than using an array of months you would use a function to look up the number of days in a given month and year.

We'd create a function getDaysInMonth() that will return the number of days in a given year and month.

If the selected month or year changes, we'll update the number of days in the month:

function getDaysInMonth(year, monthIndex) {
    // Return the number of days in the month. Ensure the monthIndex is a number so the  1 works correctly.
    return new Date(year, Number(monthIndex)   1, 0).getDate();
} 

today = new Date(),
// default targetDate is christmas
targetDate = new Date(today.getFullYear(), 11, 25);
 
window.onload = () => {
 
    setDate(targetDate); 
    setYears(60) // set the last five years in dropdown
    
    // if the month changes set the number of days
    $("#select-month").change(function() {
      setDays($("#select-month").val(), $('#select-year').val());
    });
    
    // if the year changes set the number of days
    $("#select-year").change(function() {
      setDays($("#select-month").val(), $('#select-year').val());
    });

    function setDate(date) {
      setDays(date.getMonth(), date.getFullYear());
      $("#select-day").val(date.getDate());
      $("#select-month").val(date.getMonth());
      $("#select-year").val(date.getFullYear()); 
    }

    // make sure the number of days correspond with the selected month
    function setDays(monthIndex, year) {
      var optionCount = $('#select-day option').length,//get the length of days
          daysCount = getDaysInMonth(year, monthIndex);
      if (optionCount < daysCount) {//put a option data
        for (var i = optionCount; i < daysCount; i  ) {
          $('#select-day').append($("<option></option>").attr("value", i   1).text(i   1)); 
        }
      }
      else { // else delete all option data
        for (var i = daysCount; i < optionCount; i  ) {
          var optionItem = '#select-day option[value='   (i 1)   ']';
          $(optionItem).remove();
        } 
      } 
    }

    function setYears(val) {
      var year = today.getFullYear();
      for (var i = 0; i < val; i  ) {
          $('#select-year')
            .append($("<option></option>")
            .attr("value", year - i)
            .text(year - i)); 
        }
    }
}

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <select id="select-day"></select>
  <select id="select-month">
      <option value="0">January
        <option value="1">February
      <option value="2">March
      <option value="3">April
      <option value="4">May
      <option value="5">June
      <option value="6">July
      <option value="7">August
      <option value="8">September
      <option value="9">October
      <option value="10">November
      <option value="11">December
  </select>
  <select id="select-year"></select>
</div>
<script src="jquery.js"></script>