【JAVASCRIPT】three-level link of year, month and day

index.html

<div>
  <select id="year"></select> year
  <select id="month" onchange="initDate()"></select> month
  <select id="date"></select>
</div>

javascript-three-level-link-of-year-month-and-day.markdown

【JAVASCRIPT】three-level link of year, month and day

A Pen by Edward Lance Lorilla on CodePen.

License.

script.js

/**
* Initialization year
*/
function initYear() {
  //Get the current year
  let curYear = new Date().getFullYear();
  //Get the year list object
  let yearObj = document.getElementById("year");
  yearObj.options.add(new Option("---Please select the year---", ""));
  for (let year = curYear; year> curYear-100; year--) {
    let option = new Option(year, year);
    yearObj.options.add(option);
  }
}

/**
* Initialization month
*/
function initMonth() {
  //Get the year list object
  let monthObj = document.getElementById("month");
  monthObj.options.add(new Option("---Please select the month---", ""));
  
  for (let month = 1; month <= 12; month++) {
    let option = new Option(month, month);
    monthObj.options.add(option);
  }
}

/**
* Initialization date
*/
function initDate() {
  let dateObj = document.getElementById("date");
  var length = dateObj.options.length;
  for (var i = length-1; i >= 0; i--) {
      dateObj.options[i] = null;
  }
  //Get the selected month of the month
  
  let month = document.getElementById("month").value;
  //When the month is selected, the corresponding date will pop up
  dateObj.options.add(new Option("---Please select the date---", ""));
  //Convert month into a number
  month = parseInt(month);
  //Define the number of days per month
  let days = 31;
  switch (month) {
    case 1:
    case 3:
    case 5:
    case 7:
    case 8:
    case 10:
    case 12:
      break;
    case 4:
    case 6:
    case 9:
    case 11:
      days = 30;
      break;
    case 2:
      //Need to judge whether it is a leap year and get the currently selected year
      let year = document.getElementById("year").value;
      if (year% 4 == 0 && year% 100 != 0 || year% 400 == 0) {
        days = 29;
      } else {
        days = 28;
      }
      break;
  }
  //Circular output the number of days obtained
  
  for (let i = 1; i <= days; i++) {
    let option = new Option(i, i);
    dateObj.options.add(option);
  }
}

initYear();
initMonth()