JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<div>
    <label>Select an Option:</label>
    <select id="select1">
        <option value="" disabled="disabled" selected="selected">Select an option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
</div>
<br /><br />
<div>
    <label>Start Date:</label>
    <input type="text" id="startdatepicker" class="datepicker" />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddatepicker" class="datepicker" />
</div>

CSS

label {
    padding-right: 10px;
}

JavaScript

$('#select1').change(function() {
    $('#startdatepicker, #enddatepicker').datepicker('refresh');
    $('#startdatepicker, #enddatepicker').val("");
    if ($('#select1').val() == '2') {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "mm/dd/yy",
            beforeShow: function(input, inst) {
                $(this).data('pickerVisible', true);
            },
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMax.setDate(dateMin.getDate() + 30);
                    $('#enddatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                } else if (this.id == 'enddatepicker') {
                    var dateMin = $(this).datepicker('getDate');
                    var dateMax = $(this).datepicker('getDate');
                    dateMin.setDate(dateMax.getDate() - 30);
                    $('#startdatepicker').datepicker('option', { minDate: dateMin, maxDate: dateMax });
                }
            }
        });
    } else {
        $('#startdatepicker, #enddatepicker').datepicker({
            showButtonPanel: true,
            closeText: 'Clear',
            dateFormat: "dd/mm/yyyy",
            beforeShow: function(input, inst) {
                $(this).data('pickerVisible', true);
            },
            onSelect: function(selected) {
                if (this.id == 'startdatepicker') {
                    $('#enddatepicker').datepicker('option', 'minDate', selected);
                } else if (this.id == 'enddatepicker') {
                    $('#startdatepicker').datepicker('option', 'maxDate', selected);
                }
            }
        });
        
    }
});

$('.datepicker').datepicker('widget').delegate('.ui-datepicker-close',...