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">
<label for="thirdDate">Third:</label>
<input type="text" id="thirdDate">

CSS

input {
    margin-bottom:5px;
}

JavaScript

$('input').datepicker({
    showButtonPanel: true,
    closeText: 'Clear',
    beforeShow: function(input, inst) {
        $(this).data('pickerVisible', true);
    },
    onSelect: function(dateText, inst) {
        // set range <selected, +7d> on next for example
        var minDate = $(this).datepicker('getDate');
        var maxDate = $(this).datepicker('getDate');
        maxDate.setDate(minDate.getDate() + 7);

        $($(this).nextAll('input')[0]).datepicker('option', {minDate: minDate, maxDate: maxDate});
    },
    onClose: function(dateText, inst) {
        $(this).data('pickerVisible', false);
        if (dateText == '') {
          $(this).data('selected', true);
          $($(this).nextAll('input')).val('');
          $($(this).nextAll('input')).datepicker('option', {minDate: '', maxDate: ''});
        }
    } 
});

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