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="date" id="startdatepicker"  />
    <br /><br />
    <label>End Date:</label>
    <input type="text" id="enddatepicker" class="datepicker" disabled="disabled" />
</div>

CSS

label {
    padding-right: 10px;
}

JavaScript

$('#select1').change(function() {
    $('#enddatepicker').removeAttr('disabled');
    $('#enddatepicker').val('');
});
            $('#enddatepicker').datepicker('destroy').datepicker({
                minDate: minDate,
                maxDate: maxDate
            });
        } else {
            $('#enddatepicker').datepicker('option', 'minDate', dateText);
        }
    }
});

$('#enddatepicker').datepicker({
    dateFormat: "mm/dd/yy",
    onSelect: function(dateText, inst) {
        var minDate = $(this).datepicker('getDate');
        var maxDate = $(this).datepicker('getDate');
        if ($('#select1').val() == '2') {
            minDate.setDate(maxDate.getDate() - 30);
            

$('.datepicker').datepicker('widget').delegate('.ui-datepicker-close', 'mouseup', function() {
    var inputToBeCleared = $('.datepicker').filter(function() { 
      return $(this).data('pickerVisible') == true;
    });    
    $(inputToBeCleared).val('');
});