I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' class has been applied. Despite this, the datepicker does not appear inside the modal box.
Interestingly, when I tried adding the datepicker outside of the modal box on the same page, it worked perfectly.
Here is the code snippet:
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
The HTML code for the modal box content is as follows:
<div class="">
<a type="button" class="openmodalbox" href="javascript:void(0);" value="Modal box" title="Add Allergy">
add
<span class="modalboxContent">
<div class="heading_div">Add Allergies</div>
<table>
<tr><td>Allergies</td><td><input class="inp_padd" type="text"></input></td></tr>
<tr><td>Type</td><td><input class="inp_padd" type="text"></input></td></tr>
<tr><td>First observed</td><td><input type="text" class="inp_padd" id="datepicker"></input></td></tr>
<tr><td></td><td><input type="submit" class="save_button_style" value="Save" /></td></tr>
</table>
</span>
</a>
</div>
Could this issue be related to the modal box implementation or the datepicker configuration?
Any assistance would be greatly appreciated.
Thank you!