JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <fieldset class="dateField">
        <legend>Start Date</legend>
        <label for="fromMonth">Month</label>
        <select id="fromMonth" class='monthSelect'></select>
        <label for="fromDay">Day</label>
        <select id="fromDay" class='daySelect'></select>
        <label for="fromYear">Year</label>
        <select id="fromYear" class='yearSelect'></select>
    </fieldset>
    <fieldset class="dateField">
        <legend>End Date</legend>
        <label for="toMonth">Month</label>
        <select id="toMonth" class='monthSelect'></select>
        <label for="toDay">Day</label>
        <select id="toDay" class='daySelect'></select>
        <label for="toYear">Year</label>
        <select id="toYear" class='yearSelect'></select>
    </fieldset>
</form>
<input type="button" id="reset" class="resetButton" value="Reset" />

CSS

fieldset.dateField {
    width: 375px;
}

select.daySelect {
    width: 45px;
    margin: 5px 10px 0 0;
}

select.monthSelect {
    width: 55px;
    margin: 5px 10px 0 10px;
}

select.yearSelect {
    width: 65px;
    margin: 5px 10px 0 0;
}

input.resetButton {
    margin: 10px 20px 0 0
}

JavaScript

'use strict';

var fromDay = $('#fromDay'),
    fromMonth = $('#fromMonth'),
    fromYear = $('#fromYear'),
    toDay = $('#toDay'),
    toMonth = $('#toMonth'),
    toYear = $('#toYear'),
    reset = $('#reset'),
    CURDATE = new Date(),
    curFromDate,
    curToDate,
    MINYEAR = 2000,
    NUMYEARS = 40,
    MAXYEAR = MINYEAR + NUMYEARS - 1,
    MAXDATE = new Date(MAXYEAR, 11, 31),
    MONTHS = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec'];

function maxDay(params) { // {month, year}
    
    params.month = params.month || 0;
    params.year = params.year || MINYEAR;
    
    return new Date(params.year, (params.month - 0) + 1, 0).getDate();
}

function createAry(params) { // { min, max, values }
    
    var i,
        ary = [];
    
    params.values = params.values || [];
    
    if (params.values.length !== 0) {
        return params.values.slice(params.min, params.max + 1);
    }
    
    for (i = 0; i < params.max - params.min + 1; i++) {
        ary[i] = params.min + i;
    }
    
    return ary;
}

function days(params) { // {minDay, month, year}
    
    var max;
    
    params.month = params.month || 0;
    params.year = params.year || MINYEAR;
    
    max = maxDay({
        month: params.month,
        year: params.year
    });
    
    params.minDay = params.minDay || 1;
    
    return createAry({
        min: params.minDay,
        max: max
    });
}

function months(params) { // {minMonth, months}
    
    params.minMonth = params.minMonth || 0;
    
    return createAry({
        min: params.minMonth,
        max: 11,
        values: MONTHS
    })
}

function years(params) { // {minYear}
    
    params.minYear = params.minYear || MINYEAR;
    
    return createAry({
        min: params.minYear,
        max: MAXYEAR
    });
}

function updateSelectOptions(params) { // {select, options, current]
    
    params.select.empty();
    
    params.options.forEach(function (e, i) {
       ...