Populate dropdown list with current day, month and year

I am probably asking an easy question for you, but I am still a newbie, so please someone help me. I have this html and jQuery code:

$(document).ready(function() {
    var d = new Date();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();

    $("#month").val(month); 
    $("#year").val(year);    
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="month">
    <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">November</option>
    <option value="12">December</option>
</select>
<select id="year">
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
</select>

So the question is: How can I populate one more dropdown showing current day, but also showing all the days from the month, based on if they are 30, 31, 28 or even leap year (29 days in Fevruary)? Any help will be appreciated. P.S. And also can this be done more dynamically ?

Answer

Well, instead of writing a lot of options tag, why not let a loop do it for you… check my code below please, I’ll give a brief explanation below that.

(This code uses jQuery, but it is easily achievable with vanilla JS)

$(document).ready(function() {
  const monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];
  let qntYears = 4;
  let selectYear = $("#year");
  let selectMonth = $("#month");
  let selectDay = $("#day");
  let currentYear = new Date().getFullYear();

  for (var y = 0; y < qntYears; y++) {
    let date = new Date(currentYear);
    let yearElem = document.createElement("option");
    yearElem.value = currentYear
    yearElem.textContent = currentYear;
    selectYear.append(yearElem);
    currentYear--;
  }

  for (var m = 0; m < 12; m++) {
    let month = monthNames[m];
    let monthElem = document.createElement("option");
    monthElem.value = m;
    monthElem.textContent = month;
    selectMonth.append(monthElem);
  }

  var d = new Date();
  var month = d.getMonth();
  var year = d.getFullYear();
  var day = d.getDate();

  selectYear.val(year);
  selectYear.on("change", AdjustDays);
  selectMonth.val(month);
  selectMonth.on("change", AdjustDays);

  AdjustDays();
  selectDay.val(day)

  function AdjustDays() {
    var year = selectYear.val();
    var month = parseInt(selectMonth.val()) + 1;
    selectDay.empty();

    //get the last day, so the number of days in that month
    var days = new Date(year, month, 0).getDate();

    //lets create the days of that month
    for (var d = 1; d <= days; d++) {
      var dayElem = document.createElement("option");
      dayElem.value = d;
      dayElem.textContent = d;
      selectDay.append(dayElem);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year"></select>
<select id="month"></select>
<select id="day"></select>

There’s a variable called qntYears, there you set how many years back from current year you want to show in the select of years…

after that, there’s a loop adding all months, nothing special here.

The last part is the important one, I added a change callback to the selects of year and month. When they change, the listener recreates (using a for loop) the days based on the year and current month, it is very useful since every month has different amount of days (28, 29, 30, 31).
The function that do this is the AdjustDays().