JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/jquery-ui.min.js"></script>
<button id="b1">Show Dialog</button>

<div id="settingsDialog" title="Edit Settings">
    <span class="note">*Notice that the datepicker is no longer showing and the input is no longer the focus. however, clicking into the input does not make the datepicker appear again (UNLESS YOU CLICK OUTSIDE INPUT FIRST)</span>  
    TO: <input id="to" type="text" />
    FROM:  <input id="from" type="text" />  
</div>

CSS

input{ display:block; margin:1em;}
.note{font-size:0.8em; display:block;}

JavaScript

$(document).ready(function(){
     $("#to").datepicker({
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "minDate", selectedDate);
        }
    });
    
    $("#from").datepicker({
        onClose: function (selectedDate) {                            $("#to").datepicker("option", "maxDate", selectedDate);
    }
});
    
    
$("#settingsDialog").dialog({
     autoOpen: false,
    open: function (event, ui) {
                     if ($(".ui-datepicker").is(":visible"))
                         $(".ui-datepicker").hide();

                     $("#to").blur();
                     $this.focus().click();
                 },
     close: function () {
         $(this).dialog("close");
     }
});
    
    
      
    $("#b1").click(function(){
       $("#settingsDialog").dialog("open");
    });
   
});