JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<div class="container">
<input type="text" class="myToggleInput" />
<div class="toggleContainer">
<div class="myDatepicker"></div>
</div>
</div>
JavaScript
$('.myDatepicker').datepicker();
$(document).on("click", '.myToggleInput', function () {
$('.toggleContainer').show();
});
$(document).on("click", function () {
$('.toggleContainer').hide();
});
$(document).on("click", ".toggleContainer, .myToggleInput, .ui-datepicker-next, .ui-datepicker-prev", function (e) {
e.stopPropagation();
});