JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="demo">
    
<p>Date: <input id="fullDate" type="text" style="display:block"></p>
    <select id="month" name="month">
        <option value="01">January</option> 
        <option value="02">February</option>
        <option value="03">March</option>
        <option value="04">April</option>
        <option value="05">May</option>
        <option value="06">June</option>
        <option value="07">July</option>
        <option value="08">August</option>
        <option value="09">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>
    <select id="day" name="day">
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option...

JavaScript

$(function() {
    $("#fullDate").datepicker({
        onClose: function(dateText, inst) {
            $('#year').val(dateText.split('/')[2]);
            $('#month').val(dateText.split('/')[1]);
            $('#day').val(dateText.split('/')[0]);
        }
    });
});

// Prevent selection of invalid dates through the select controls 


function checkDays() {
    var daysInMonth = 32 - new Date($('#year').val(), $('#month').val(), 32).getDate();
    $('#day option:gt(27)').removeAttr('disabled');
    $('#day option:gt(' + (daysInMonth - 1) + ')').attr('disabled', true);
    if ($('#day').val() > daysInMonth) {
        $('#day').val(daysInMonth);
    }
}

$("#datepicker").datepicker({
    showOn: "button",
    buttonImage: "http://jqueryui.com/demos/images/calendar.gif",
    buttonImageOnly: true,
    onSelect: function(dateText, inst) {
        //dateText comes in as MM/DD/YY
        var datePieces = dateText.split('/');
        var month = datePieces[0];
        var day = datePieces[1];
        var year = datePieces[2];
        //define select option values for
        //corresponding element
        $('select#month').val(month);
        $('select#day').val(day);
        $('select#year').val(year);

    }
});

$('#year').change(function() {
    $('#month option').removeAttr('disabled'); // Enable all months
    var today = new Date();
    if ($(this).val() == today.getFullYear()) { // If current year
        $('#month option:lt(' + today.getMonth() + ')').attr('disabled', true); // Disable earlier months
    }
    $('#month').change(); // Cascade changes
});
$('#month').change(function() {

    $('#day option').removeAttr('disabled'); // Enable all days
    var today = new Date();

    if ($('#year').val() == today.getFullYear() && $(this).val() == (today.getMonth() + 1)) {
        // If current year and month
        $('#days option:lt(' + (today.getDate() - 1) + ')').attr('disabled', true); // Disable earlier days
    }
    checkDays(); // Ensure only valid...