JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<input type="text" class="datePicker" />
JavaScript
positionDatePicker= function(cssToAdd) {
/* Remove previous positioner */
var oldScript= document.getElementById('datePickerPosition');
if(oldScript) oldScript.parentNode.removeChild(oldScript);
/* Create new positioner */
var newStyle= document.createElement("style");
newStyle.type= 'text/css';
newStyle.setAttribute('id', 'datePickerPostion');
if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
else newStyle.appendChild(document.createTextNode(cssToAdd));
document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
/* Initialize date picker elements */
var dateInputs= jQuery('input.datePicker');
dateInputs.datepicker();
dateInputs.datepicker('option', {
'dateFormat' : 'mm/dd/yy',
'beforeShow' : function(input, inst) {
var bodyRect= document.body.getBoundingClientRect();
var rect= input.getBoundingClientRect();
positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
}
}).datepicker('setDate', new Date());
});