JSFiddle - React, Tailwind, and code Playground

by inser

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="calendar">
  <select class="year"></select>
  <select class="month"></select>
  <select class="day"></select>
</div>

CSS

select {
            display: inline-block;
            padding: 5px;
            margin: 10px;
            font-size: larger;
        }

        .calendar {
            text-align: center;
            margin-top: 50px;
        }

JavaScript

function Calendar() {
    var settings = {
            yearsRange: 100,
            yearElement: '.year',
            monthElement: '.month',
            dayElement: '.day',
            monthNames: ["January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December" ],
            maxDate: new Date()
        },
        $this = this;

    this.maxDate = function() { return settings.maxDate || new Date(); }

    this.init = function(options) {
        settings = $.extend({}, settings, options || {});

        for(i = 0, year = $this.maxDate().getFullYear(); i <= settings.yearsRange; i++) {
            $(settings.yearElement)
                .append(createOption(year--));
        }
        
        $.each(settings.monthNames, function(index) {
            $(settings.monthElement)
                .append(createOption(index, this));
        });
        
        for(i = 0; i < 31; i++) {
            $(settings.dayElement)
                .append(createOption(i + 1));
        }

        $([settings.yearElement, settings.monthElement, settings.dayElement].join(",", )).on('change', function() {
            $this.setDate(getSelectedDate());
        });

        return this;
    }

    function getSelectedDate() {
        return new Date(
            $(settings.yearElement).val(), 
            $(settings.monthElement).val(), 
            $(settings.dayElement).val()
        );
    }

    function displayDate(date) {
        $(settings.yearElement).val(date.getFullYear());
        $(settings.monthElement).val(date.getMonth());
        $(settings.dayElement).val(date.getDate());

        return date;
    }

    function createOption(val, text) {
        return $('<option>').val(val).text(text || val);
    }

    this.setDate = function(date) {
        var result = {
            year: date.getFullYear(),
            month: date.getMonth(),
            day: date.getDate()
        };

        var maxMonth =...