I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code:
<tr>
<td class="label-td"><label for="dateOpen_add">Date Opened</label></td>
<td><input type="text" id="dateOpen_add" name="dateOpen_add" maxlength="10" size="10" /></td>
</tr>
Here's the accompanying jQuery code:
$('#dateOpen_add').datepicker({
dateFormat: 'yy-mm-dd',
date: $('#dateOpen_add').val(),
current: $('#dateOpen_add').val(),
starts: 1,
position: 'bottom',
onBeforeShow: function(){
$('#dateOpen_add').setDate($('#dateOpen_add').val(), true);
},
onChange: function(formated, dates){
$('#dateOpen_add').val(formated);
}
});
When I click inside the dateOpen_add textbox, the datepicker appears strangely like this:
Furthermore, you can see the problem in action through this link: LINK
If anyone has insights into why this may be happening, I'd greatly appreciate your assistance.