mizlul mizlul - 4 months ago 26
AngularJS Question

datetime picker not showing correctly on modal window bootstrap

I am using this library https://www.npmjs.com/package/angularjs-datetime-picker to show datetime picker , but for some reason on modal window is not showing correctly.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Add new class</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<input type="text" date-format="yyyy-MM-dd HH:mm:ss" hour="09" minute='00' name="time" ng-model="clas.class_.time" datetime-picker class="form-control input-lg" tabindex="3">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" ng-click="clas.create()" data-dismiss="modal">Create</button>
</div>
</div>
</div>
</div>


Anyone knows the issue?

click here to see the image

Answer

It' a CSS problem, by default bootstrap modal has a z-index: 1050;. Try to add a higher z-index to your datetime-picker like this:

.angularjs-datetime-picker {
    z-index:5000;
}
Comments