JSFiddle - React, Tailwind, and code Playground

by bkress

HTML

<html>
    <head>
    </head>
    <body class="ui-widget">
        <div id='mainApplication' class="ui-widget">
            <div id="menuBar" class="ui-widget">
                <br />
                <span><strong>Start Date:</strong></span><br>
                <input type="text" id="start" class="date"><br>
                <span><strong>End Date:</strong></span><br>   
                <input type="text" id="end" class="date"><br>
            </div>
        </div>
    </body>
</html>

CSS

/*
* jQuery UI CSS Framework 1.8.9
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*/

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
* jQuery UI CSS Framework 1.8.9
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Theming/API
*
* To view and modify this theme, visit...

JavaScript

$(document).ready(function() {
    var dates = $('.date').datepicker({
        changeMonth: true,
        changeYear: true,
        onSelect: function(selectedDate) {
            var option = this.id == "start" ? 'minDate' : 'maxDate',
                instance = $(this).data('datepicker');
            var date = $.datepicker.parseDate(
            instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates.not(this).datepicker("option", option, date);
        }
    });
});