Datepicker shows up behind text input dropdown

I googled this problem and implemented some of the jQuery code provided but nothing worked. How do I get my datepicker to show up in front of the dropdown?
This is my HTML:
<table>
<tr><th>Start Date:</th><td>
<div class="input text">
<label for="MealplanEventDate"></label>
<input type="text" name="event_date" size="44" id="MealplanEventDate" maxlength="255"/>
</div>
</td></tr>
<tr><th>End Date:</th><td>
<div class="input text">
<label for="MealplanEndDate"></label>
<input type="text" name="end_date" size="44" id="MealplanEndDate" maxlength="255"/>
</div>
</td></tr></table>
This is my jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#MealplanEventDate').datepicker({
dateFormat: 'yy-mm-dd',
});
$('#MealplanEndDate').datepicker({
dateFormat: 'yy-mm-dd',
});
});
</script>
This is my CSS:
#MealplanEventDate { position: relative; z-index: 10000 !important; }
#MealplanEndDate { position: relative; z-index: 10000 !important; }
.ui-datepicker { position: relative; z-index: 10000 !important; }
input[type=text] {position: relative; z-index: 1;}

 

The reason for the empty label tags is that this was built in cakephp and you have to create an empty label or it automatically appends a label.

 

Bullshitting the label is not the answer, USE the label for your LABEL, not a table or TH. That is NOT tabular data. STOP using tables for layout, this isn't 1997.

Likewise we now have type="date" AND regex pattern="", so why are you even wasting JavaScript, much less the mental-huffing-midgetry of jQuery on this?

The CSS also screams that your layout must be a horrorshow. Lemme guess, the monument to derpitude that is bootcrap, arsebreeze, or some other halfwit "front-end framework"?

<form>
	<fieldset>
		<div>
			<label for="MealplanEventDate">Start Date:</label>
			<input type="date" name="event_date" id="MealplanEventDate">
		</div><div>
			<label for="MealplanEndDate">End Date:</label>
			<input type="date" name="end_date" id="MealplanEndDate">
		</div>
	</fieldset>
</form>

Code (markup):

You want the label to match width, set the DIV for display:flex, the label to flex:0 0 auto; with an appropriate width like 10em, and the input to flex:1 0 auto;

If you can't even assemble the proper semantics and accessibility, you really shouldn't be adding JavaScript to it. But of course that is how people get SUCKERED by idiotic incompetent trash like frameworks in the first place.

 

I do it like this

html: mark an input with the class that you will use to register the date picker like this
<input type="text" id="last_loginStartDate" name="last_loginStartDate" class="input-medium datepicker" />

js: register the date picker
$(".datepicker").datepicker();

css: raise up the date picker above everything else. This is a class on a deeper node in the date picker layout.
.ui-datepicker{ z-index: 9999 !important;}