JQuery UI DatePicker覆蓋下面的控件

Question

我有一組兩個日期字段，其中JQuery UI DatePicker覆蓋下面的控件。如何設置DatePicker的ZIndex或Position，使其不與控件相沖突？我正在使用FireFox。

這裏是我的jsfiddle： http://jsfiddle.net/pNP22/4/

這裏是我的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> 

這裏是我的javascript：

$('#StartDate').datepicker(); 
    $('#EndDate').datepicker(); 

Answer 1

這似乎工作：http://jsfiddle.net/pNP22/6/

$('#EndDate').datepicker({ 
    beforeShow: function (input, inst) { 
     inst.dpDiv.css({ 
      marginTop: -input.offsetHeight + 'px', 
      marginLeft: input.offsetWidth + 'px' 
     }); 
    } 
}); 

請注意，更改是全局的，一旦在一個選擇器上執行，另一個選擇器開始使用它。

我偷了它從這裏：How to change the pop-up position of the jQuery DatePicker control