JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<label for="birthday">Birthday Year</label>
<select id="byear" name="byear" required>
  <option value="">Select Year</option>
  <option value="1994">1994</option>
  <option value="1993">1993</option>
  <option value="1992">1992</option>
  <option value="1991">1991</option>
</select><br><br>

<label for="birthday">Month</label>
<select id="bmonth" name="bmonth" required>
  <option value="">Select Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">Novermber</option>
  <option value="12">December</option>
</select><br><br>

<label for="birthday">Day</label>
<select id="bday" name="bday" required disabled>
  <option value="">Select Day</option>
</select>

JavaScript

function daysInMonth(month, year) {
  return new Date(year, month, 0).getDate();
}

$('#byear, #bmonth').change(function() {

  if ($('#byear').val().length > 0 && $('#bmonth').val().length > 0) {
    $('#bday').prop('disabled', false);
    $('#bday').find('option').remove();

    var daysInSelectedMonth = daysInMonth($('#bmonth').val(), $('#byear').val());

    for (var i = 1; i <= daysInSelectedMonth; i++) {
      $('#bday').append($("<option></option>").attr("value", i).text(i));
    }

  } else {
    $('#bday').prop('disabled', true);
  }

});