JQuery UI DatePicker Covering Controls Below

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();

Do you just need to include the CSS for jQuery UI? I have updated your [jsfiddle](http://jsfiddle.net/pNP22/5/) to include a CSS file. — John S, Nov 27 '13 at 17:21
Thanks so much John. That was it for the fiddle. It looks like the problem with my project was that it was linking with just the minified JQuery UI Core and not the full css. — Greg Finzer, Nov 27 '13 at 17:31

score 0 · Accepted Answer · edited May 23 '17 at 12:12

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

JQuery UI DatePicker Covering Controls Below

1 Answers1