index.html

<link rel="stylesheet" href="style.css">

<form class="wrapDateSelect">
    <select name="month">
      <option class="placeholder" selected></option>
      <option value="1" data-days="31">January</option>
      <option value="2" data-days="28">Febuary</option>
      <option value="3" data-days="31">March</option>
      <option value="4" data-days="30">April</option>
      <option value="5" data-days="31">May</option>
      <option value="6" data-days="30">June</option>
      <option value="7" data-days="31">July</option>
      <option value="8" data-days="31">August</option>
      <option value="9" data-days="30">September</option>
      <option value="10" data-days="31">October</option>
      <option value="11" data-days="30">November</option>
      <option value="12" data-days="31">December</option>
    </select>
    <select name="day"  disabled>
      <option class="placeholder" selected></option>
    </select>
    <select name="year" disabled>
      <option class="placeholder" selected></option>
    </select>
    <button disabled>Confirm</button>
  </form>
  
<script>
        const dateSelects = document.querySelectorAll(".wrapDateSelect > select"),
    dateConfirm = document.querySelector(".wrapDateSelect > button"),
    today = new Date(),
    changeMonth = (e) => {
        const selectedDays = parseInt(e.target.selectedOptions[0].dataset.days);
        if (dateSelects[1].disabled) {
        for (let i = 1; i <= selectedDays; i++) {
            const option = document.createElement("option");
            option.textContent = i;
            dateSelects[1].append(option);
        }
        dateSelects[1].disabled = false;
        return;
        }

        const options = dateSelects[1].querySelectorAll("option:not(.placeholder)");

        if (selectedDays === options) return;

        if (selectedDays > options.length) {
        for (let i = options.length; i <= selectedDays; i++) {
            const option = document.createElement("option");
            option.textContent = i;
            dateSelects[1].append(option);
        }
        } else {
        for (let i = selectedDays + 1; i <= options.length; i++)
            options[i - 1].remove();
        }
    },
    changeDay = (e) => {
        if (dateSelects[2].disabled) dateSelects[2].disabled = false;
    },
    changeYear = (e) => {
        if (dateConfirm.disabled) dateConfirm.disabled = false;
    };

    for (let i = 1, year = today.getFullYear(); i <= 120; i++, --year) {
    const option = document.createElement("option");
    option.textContent = year;
    dateSelects[2].append(option);
    }

    document.querySelector(".wrapDateSelect").addEventListener("change", (e) => {
    if (e.target === dateSelects[0]) changeMonth(e);
    if (e.target === dateSelects[1]) changeDay(e);
    if (e.target === dateSelects[2]) changeYear(e);
    });

    dateConfirm.addEventListener("click", (e) => {
    e.preventDefault();
    const data = new FormData(e.target.parentElement);
    console.log(...data.entries())
    });

</script>