JSFiddle - React, Tailwind, and code Playground

by wallabykid

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">
    
<input type="text" id="dummyDate" />

<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; }

#dummyDate {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;    
}

JavaScript

$(function() {

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