JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/ui-lightness/jquery-ui.css">
<label for="firstDate">First:</label>
<input type="text" id="firstDate">
<label for="secondDate">Second:</label>
<input type="text" id="secondDate">

JavaScript

$('#firstDate').datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
    onSelect: function(dateText, inst) {
        // set range <today, +7d> on second for example
        var minDate = $(this).datepicker('getDate');
        var maxDate = $(this).datepicker('getDate');
        maxDate.setDate(minDate.getDate() + 7);
        $('#secondDate').datepicker('destroy').datepicker({
            minDate: minDate,
            maxDate: maxDate
        });
    },
    onClose: function(dateText, inst) {
        if (dateText == '') {
          $('#secondDate').val('');
          $('#secondDate').datepicker('destroy').datepicker();
        }
    } 
});

$('#firstDate').datepicker('widget').delegate('.ui-datepicker-close', 'mouseup', function() {
    $('#firstDate').val('');
});