JSFiddle - React, Tailwind, and code Playground

by Thomas Langston

HTML

<!-- Project 11.1. Write JavaScript to create cascading menus for day, month and year that allow the entry of valid dates only. For example, if February is selected as the month, the day menu should only go from 1-28, unless the Year menu indicates a leap year, in which case the Day menu should go from 1-29, and so on. ... -->
<form>
    <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="day"></select>
    <select id="year"></select>
</form>

JavaScript

function setDayOptions() {
    var monthVal = $('#month').val();
    $('#day').html(getDayOptions(monthVal))
}

setDayOptions();

$('#year').html(getYearOptions());

$('#month').change(function () {
    setDayOptions();
});

function getDaysForMonth(month) {
    daysInMonth = {
        1: 31,
        2: 28,
        3: 31,
        4: 30,
        5: 31,
        6: 30,
        7: 31,
        8: 31,
        9: 30,
        10: 31,
        11: 30,
        12: 31
    };
    return daysInMonth[month];
}

function getDayOptions(month, year) {
    var dayOptions = '';
    var endDay = getDaysForMonth(month);
    for (var currentDay = 1; currentDay <= endDay; currentDay++) {
        dayOptions = dayOptions + getOption(currentDay, currentDay);
    }
    return dayOptions;
}

function getYearOptions() {
    var startYear = 1999;
    var endYear = 2000;
    var yearOptions = '';
    for (var currentYear = startYear; currentYear <= endYear; currentYear++) {
        yearOptions = yearOptions + getOption(currentYear, currentYear);
    }
    return yearOptions;
}

function getOption(value, text) {
    return '<option value="' + value + '">' + text +
        '</option>';
}