JQuery UI DatePicker Covering Controls Below - jquery-ui

Question

I have a set of two date fields where the JQuery UI DatePicker is covering up the controls below. How do I set the ZIndex or Position of the DatePicker so it does not collide with the controls? I am using FireFox.
Here is my JSFiddle:
http://jsfiddle.net/pNP22/4/
Here is my HTML:
<div class="editor-label">
<label for="StartDate">Choose Start Date</label>
</div>
<div class="editor-field">
<input id="StartDate" name="StartDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="StartDate" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="EndDate">Choose End Date</label>
</div>
<div class="editor-field">
<input id="EndDate" name="EndDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EndDate" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="SiteLocation">Choose Site Location</label>
</div>
<div class="editor-field">
<select data-val="true" data-val-required="The Choose Site Location field is required." id="SiteLocation" name="SiteLocation"><option value="">-- Please Select --</option>
<option value="fce39672-cf3b-40c4-bae9-a0e800fb193c">Columbus, US</option>
<option value="ed567544-ea5e-4cb7-9be7-a2030040e017">Granada</option>
<option value="8e9630b4-db21-4a35-9894-a17e000b4eb7">Singapore</option>
</select>
</div>
<div class="editor-label">
<label for="RequestNumber">Request #</label>
</div>
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-number="The field Request # must be a number." id="RequestNumber" name="RequestNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="RequestNumber" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="Commodity">Commodity</label>
</div>
<div class="editor-field">
<input class="text-box single-line" id="Commodity" name="Commodity" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Commodity" data-valmsg-replace="true"></span>
</div>
Here is my Javascript:
$('#StartDate').datepicker();
$('#EndDate').datepicker();

Answer 1

This seems to work: http://jsfiddle.net/pNP22/6/
$('#EndDate').datepicker({
beforeShow: function (input, inst) {
inst.dpDiv.css({
marginTop: -input.offsetHeight + 'px',
marginLeft: input.offsetWidth + 'px'
});
}
});
Note the change is global, once executed on one picker, the other picker starts to use it.
I stole it from here: How to change the pop-up position of the jQuery DatePicker control