JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<button class="opendd">open</button>
<div style="display:none" class="my-dialog">
    <div class="calendar"></div>
</div>
<input type="button" value="CallbackValue">

CSS

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 11px; overflow:hidden; margin-left:7px; }

JavaScript

$(function(){
    var z;
    $dd = $(".my-dialog");
    $dd.dialog({  
            autoOpen:   true, 
            modal:      true, 
            overlay:    { opacity: 0.5, background: 'black'}, 
            title:      'Select the date:', 
            height:     245,  
            width:      234, 
            draggable:  false,  
            resizable:  false 
       });//end of dialog_atip 
    
    
    $("input[type=button][value=CallbackValue]").click(function(){  alert(z); }); 

    $('.calendar').datepicker({ 
        onSelect:function(){ 
            alert(z = $(this).val()); 
            $dd.dialog("close"); 
         } 
      }); 
    
    $(".opendd").click(function(){$dd.dialog('open')});
});