Dilettante_Pro,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<style>
html, body {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
#fb {
display: none;
border:1px solid black;
}
</style>
<div id="fb">
<input id="datepicker">
<button id = "close">X</button>
</div>
<button id = "open">Open FB</button>
<button id = "rewrite">Переписать</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<script>
$(function() {
$("#fb").on("click", "#datepicker", function() {
var datepicker = $(this).data("datepicker");
datepicker || $(this).datepicker().focus() ;
})
$("#open").on("click", function() {
$("#fb").show();
$("#open").hide();
});
$("#fb").on("click", "#close", function() {
$("#fb").hide();
$("#open").show();
});
$("#rewrite").on("click", function() {
$("#fb").html('<input id="datepicker"><button id ="close">X</button>');
});
});
</script>
</body>
</html>