JSFiddle - React, Tailwind, and code Playground

by Jorge Mejia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 <form class="form">
                <div class="form-group col-xs-4 col-md-4">
                    <label for="first-name" class="control-label">First Name</label>
                    <input type="text" class="form-control" id="first-name">
                </div>
                <div class="form-group col-xs-4 col-md-4">
                    <label for="email-address" class="control-label">Email</label>
                    <input type="email" class="form-control" id="email-address">
                </div>
                <br>
                <div class="form-group col-xs-4 col-md-4">
                    <label for="last-name" class="control-label">Last Name</label>
                    <input type="text" class="form-control" id="last-name">
                </div>
                <div class="form-group col-xs-4 col-md-4">
                    <label for="confirm-email-address" class="control-label">Confirm Email</label>
                    <input type="email" class="form-control" id="confirm-email-address">
                </div>
                <div class="form-group col-xs-4 col-md-4">
                    <div class="date-dropdowns">
                </div>
                </form>
            </div>
        </div>

JavaScript

/*
		Datepicker plugin see botom
*/


;(function ($, window, document, undefined) {

    "use strict";

    // Create the defaults once
    var pluginName = "dateDropdowns",
        pluginDefaults = {
            defaultDate: null,
            defaultDateFormat: "yyyy-mm-dd",
            displayFormat: "dmy",
            submitFormat: "yyyy-mm-dd",
            minAge: 0,
            maxAge: 120,
            minYear: null,
            maxYear: null,
            submitFieldName: "date",
            wrapperClass: "date-dropdowns",
            dropdownClass: null,
            daySuffixes: true,
            monthSuffixes: true,
            monthFormat: "long",
            required: false
        };

    // The actual plugin constructor
    function Plugin (element, options) {
        this.element = element;                                 // Element handle
        this.$element = $(element);                             // jQuery element handle
        this.config = $.extend({}, pluginDefaults, options);    // Plugin options
        this.internals = {                                      // Internal variables
            objectRefs: {}
        };
        this._defaults = pluginDefaults;                        // Reference to the plugin defaults
        this._name = pluginName;                                // Reference to the plugin name
        this.init();

        return this;
    }

	Plugin.message = {
		day: "Day",
		month: "Month",
		year: "Year"
	};

    // Avoid Plugin.prototype conflicts
    $.extend(Plugin.prototype, {

        /**
         * Initialise the plugin
         */
        init: function () {
            this.checkForDuplicateElement();
            this.setInternalVariables();
            this.setupMarkup();
            this.buildDropdowns();
            this.attachDropdowns();
            this.bindChangeEvent();

            if (this.config.defaultDate) {
                this.populateDefaultDate();
            }
        },

        /**
         *...