JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<div class="birthday" id="birthday">
    <div class="medium-4 columns">
        <select id="year" name="year" class="reg_birthdate">
            <option value="#" selected="selected">Year</option>
        </select>
    </div>
    <div class="medium-4 columns">
        <select id="month" name="month" class="reg_birthdate">
            <option value="#" selected="selected">Month</option>
        </select>
    </div>
    <div class="medium-4 columns">
        <select id="day" name="day">
            <option value="#" selected="selected">Day</option>
        </select>
    </div>
</div>

JavaScript

// Success & Error
function successField(field) {
    $(field).removeClass('errorField');
    $(field).addClass('successField');
}

function errorField(field) {
    $(field).removeClass('successField');
    $(field).addClass('errorField');
}

//Datepicker

var days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
var months = [{
    id: 1,
    name: "January",
    days: 31
}, {
    id: 2,
    name: "February",
    days: 28
}, {
    id: 3,
    name: "March",
    days: 31
}, {
    id: 4,
    name: "April",
    days: 30
}, {
    id: 5,
    name: "May",
    days: 31
}, {
    id: 6,
    name: "June",
    days: 30
}, {
    id: 7,
    name: "July",
    days: 31
}, {
    id: 8,
    name: "August",
    days: 31
}, {
    id: 9,
    name: "September",
    days: 30
}, {
    id: 10,
    name: "October",
    days: 31
}, {
    id: 11,
    name: "November",
    days: 30
}, {
    id: 12,
    name: "December",
    days: 31
}];

var now = new Date();
var over18Day = now.getUTCDate();
var over18Month = now.getUTCMonth() + 1;
var over18Year = now.getUTCFullYear() - 18;

//Years
for (var year = over18Year; year > 1900; year--) {
    $('#year').append('<option value=' + year + '>' + year + '</option>');
}

$('#year option:selected').val() !== "#";

$('#year').change(function () {
    $('#day').empty().append('<option selected="selected" value="#">Day</option>');
    $('#month').empty().append('<option selected="selected" value="#">Month</option>');
    if ($('#year option:selected').val() !== "#") {
        if ($('#year option:selected').text() == over18Year) {
            for (var i = 0; i < months.length; i++) {
                if (months[i].id <= over18Month) {
                    $('#month').append('<option value=' + months[i].id + '>' + months[i].name + '</option>');
                }
            }
        } else {
            for (var i = 0; i < 12; i++) {
                $('#month').append('<option value=' +...