JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<form name="test_form" action="not_needed" method="post">
<table style="width: 600px;">
<tr>
<td>
<br/>How to trigger the bug:
<br/>1) Give focus to one of the date fields, but don't actually open the datepicker calendar
<br/>2) Use the keyboard to tab into the other date field
<br/>3) Notice how the calendar opens up below the table.
<br/>
<br/><b>Note: This only triggers if the calendar has NEVER been opened since the page was loaded.</b>
<br/>
<br/>How to work-around/prevent the bug ( options):
<br/>
<br/>1) Add one of the jQuery-UI stylesheets to the page... this seems wrong... having a dependency on the assumed presence of certain CSS properties/declarations
<br/>
<br/>2) Change the following part of the _doKeyUp method in the datepicker class:
<br/>From:
<pre>
if (date) { // only if valid
$.datepicker._setDateFromField(inst);
$.datepicker._updateAlternate(inst);
$.datepicker._updateDatepicker(inst);
}
</pre>
<br/> To:
<br/><pre>
if (date) { // only if valid
$.datepicker._setDateFromField(inst);
$.datepicker._updateAlternate(inst);
if (inst && $.datepicker._datepickerShowing){
$.datepicker._updateDatepicker(inst);
}
}
</pre>
<br/>
<br/>
<br/>
</td>
<td style="background-color: red;">
<table>
<tr>
<td>
<input type="text" class="date" name="date1" value="" size="5"/>
</td>
<td>
<input type="text" class="date" name="date1" value="12/13/2014" size="5"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
JavaScript
$().ready(function(){
var defaults = {
showOn: 'button',
buttonText: "Choose a Date",
buttonImageOnly: true
};
$("input.date").datepicker(defaults);
});