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

下面是JQuery UI DatePicker覆盖控件

1 个答案: