JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<input type="button" value="Show Popup" id="button"/>
<div id="popup">
    <div>
        Date: <input type="text" id="datePicker3" >
    </div>
    <div>
        Name: <input type="text" id="UserName">
    </div>
</div>

JavaScript

$(document).ready(function() {
    $("#popup").dialog({
        open: function() {
            $('#datePicker3').removeAttr("disabled");
        },
        close: function () {
            $('#datePicker3').datepicker('hide');
        }
    });

    $("#datePicker3").datepicker();

    $("#button").click(function() {
        $('#datePicker3').attr("disabled", true);
        
        $("#popup").dialog("open");
    });
});