In my PHP application, I have incorporated a date selection feature within a modal dialog. However, when clicking the control, the calendar appears in the left corner of the page and remains visible even after selecting a date. Additionally, clicking elsewhere on the page does not close the calendar. Here is a snippet of my code:
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
<form class="form-horizontal" id="Compensation_Leave" >
<div class="control-group">
<label class="control-label">Leave Dates</label>
<div class="control-group">
<label class="control-label" for="from">From</label>
<div class="input-group date" data-date="" data-date-format="yyyy-mm-dd">
<input type='text' id="startdate" class="form-control" name="startdate" ></input>
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="to">To</label>
<div class="input-group date" data-date="" data-date-format="yyyy-mm-dd">
<input id="enddate" type="text" class="form-control" name="enddate" ></input>
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="leave_status">Reason</label>
<div class="controls">
<textarea id="leave_reason" class="form-control" name="leave_reason" maxlength="500"></textarea>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button onclick="" class="btn">Apply Leaves</button>
<button onclick="modJs.showLeaveView();return false;" class="btn">Back</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datetimepicker();
});
</script>
After modifying the script as follows:
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datetimepicker({ z-index: 9999 !important;});
});
</script>
The result was that the calendar did not appear correctly. Instead, all dates were displayed as a drop-down list within the text box itself, formatted as "yyyy-mm-dd".