JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">

    Select a format:
    <select id="format">
        <option value="us" data-placeholder="mm/dd/yyyy">US</option>
        <option value="eu" data-placeholder="dd/mm/yyyy">EU</option>
        <option value="iso" data-placeholder="yyyy-mm-dd">ISO</option>
    </select>

    <br><br>

    <input class="us" placeholder="mm/dd/yyyy" id="date" type="text" size="10" maxlength="10">
    <button id="update">update</button>
    <p id="message"></p>

    <table>
        <tr>
            <td>Year:</td>
            <td><b id="year"></b></td>
        </tr>
        <tr>
            <td>Month:</td>
            <td><b id="month"></b></td>
        </tr>        
        <tr>
            <td>Day:</td>
            <td><b id="day"></b></td>
        </tr>
    </table>
        
</div>

CSS

.example { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
#message { line-height: 15px; height: 15px; color: red; }
table td { padding: 2px 2px 2px 0; }

JavaScript

// set up a namespace
var APP = { utils: {} };

$(function () {

    var $date = $('#date');
    var $format = $('#format');
    var $message = $('#message');

    APP.utils.getValueByClass = function ($container, values) {
        var val = '';
        $.each(values, function (i, v) {
            if ($container.hasClass(v)) {
                val = v;
                return false; // exit if we have a match
            }
        });
        return val;
    };

    APP.utils.getDateElements = function (date, format) {
        var parts, sep, d, m, y;
        // allow use of either '/' or '-' for separators
        sep = (date.indexOf('/') > -1) ? '/' : '-';
        parts = date.split(sep);
        format = format.toLowerCase();
        if (format === 'us') {
            m = parts[0];
            d = parts[1];
            y = parts[2];
        }
        else if (format === 'eu') {
            d = parts[0];
            m = parts[1];
            y = parts[2];
        }
        else { // format assumed to be ISO
            y = parts[0];
            m = parts[1];
            d = parts[2];
        }
        return { year: y, month: m, day: d };
    };

    APP.utils.changeFormat = function ($select) {
        var $selected = $select.find('option:selected');
        var new_format = $selected.val();
        $date.attr('class', new_format);
        var placeholder = $selected.data('placeholder');
        $date.attr('placeholder', placeholder);
    };

    APP.utils.writeDate = function () {
        var format = APP.utils.getValueByClass($date, ['us', 'iso', 'eu']);
        var date = APP.utils.getDateElements($date.val(), format);
        if (!date.year || !date.month || !date.day) {
            $message.text('invalid date');
            return;
        }
        $('#year').html(date.year);
        $('#month').html(date.month);
        $('#day').html(date.day);
        //alert(date.year);
    };
    
    $format.change(function(){
       ...