JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<input type="button" value="Click Me" id="btnDialog" />

<div id="myDialog" title="Text Dialog">
<p>The textbox below should show the datepicker on focus, except for when the dialog opens.</p>
Enter date: <input type="text" id="myDate" />
</div>

CSS

#myDialog { display: none; }

JavaScript

$(function() {

    $('#btnDialog').click(function() {
        $('#myDate').datepicker({title:'Test Dialog'});
        $('#myDialog').dialog();
    });
});