JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<div id="dialog-form" title="test" style="display:none"> 
	<form>
	<fieldset> 
        <p>Date1: <input type="text" id="datepicker"/></p>  
	</fieldset>
	</form>
</div>
  
<button id="testDialog">Open Dialog</button>

JavaScript

$(function() { 

		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true
		});

		$( "#testDialog")
			.button()
			.click(function() {
				$( "#dialog-form" ).dialog( "open" );
});


$("#datepicker").datepicker({
    changeMonth: true,
    changeYear: true,
    //showOn: "button",
   // buttonImage: "../Images/calendar.gif",
   // buttonImageOnly: true,
    constrainInput: true,
    duration: '',
    altTimeField: '',
    time24h: false,
    onClose: function () { console.log('closed'); },
    onSelect: function () { console.log('selected'); }
//    beforeShow: function (i, e) { $('#ui-datepicker-div').maxZIndex(); }
});


	});