JSFiddle - React, Tailwind, and code Playground

by Sumit Kumar

HTML

<form name="myForm" id="myForm">
    <fieldset id='dbOne'>
        <legend>Start Date</legend>
        <label for="yearOne">Year</label>
        <select name="yearOne" id="yearOne" title="Year" class='year'></select>
        <label for="monthOne">Month</label>
        <select name="monthOne" id="monthOne" title="Month"  class='month'></select>

        <label for="dayOne">Day</label>
        <select name="dayOne" id="dayOne" title="Day"  class='day'></select>
    </fieldset>
    <fieldset id='dbTwo'>
        <legend>End Date</legend>
        <label for="yearTwo">Year</label>
        <select name="yearTwo" id="yearTwo" title="Year" class='year'></select>
        <label for="monthTwo">Month</label>
        <select name="monthTwo" id="monthTwo" title="Month"  class='month'></select>
        <label for="dayTwo">Day</label>
        <select name="dayTwo" id="dayTwo" title="Day"  class='day'></select>
    </fieldset>
</form>

JavaScript

$(function () {
    // get days in month
    function daysInMonth(month, year) {
        
        month = parseInt(month,10)+1;
        month=month.toString();
        return new Date(year, month, 0).getDate();
    }
    //creates an array of number, a = array size, b starting num
    var numberArray = function (a, b) {
        c = [];
        for (var i = 0; i < a; i++) {
            c[i] = i + b;
        }
        return c;
    };
    //generates numeric drop down
    function createOptions(parent, options) {
        var l = options.length;
        for (var i = 0; i < l; i++) {
            var val = options[i];
            var text = options[i];
            var node = document.createElement("option");
            node.textContent = text;
            node.value = val;
            if(i===0) node.selected='selected';
            parent.appendChild(node);

        }
    }
    //generates drop down with numeric value string text
    function getOptionFromMap(parent, map) {
        for (var i = 0; i < map.length; i++) {
            var x = map[i];
            var val = x.key;
            var text = x.val;
            var node = document.createElement("option");
            node.textContent = text;
            node.value = val;
            if(i===0) node.selected='selected';
            parent.appendChild(node);
        }

    }
    var years = numberArray(20, 2000);
    var days = numberArray(31, 1);
    var months = [{
        key: 00,
        val: "jan"
    }, {
        key: 01,
        val: "feb"
    }, {
        key: 02,
        val: "mar"
    }, {
        key: 03,
        val: "apr"
    }, {
        key: 04,
        val: "may"
    }, {
        key: 05,
        val: "jun"
    }, {
        key: 06,
        val: "jul"
    }, {
        key: 07,
        val: "aug"
    }, {
        key: 08,
        val: "sep"
    }, {
        key: 09,
        val: "oct"
    }, {
        key: 10,
        val: "nov"
    }, {
        key: 11,
        val: "dec"
    }];
   ...