Me enfrento a un problema al mostrar el selector de fecha y hora de bootstrap dentro de modal. Quiero crear un formulario dentro del modal en el que necesito un selector de fecha y hora para elegir la fecha y la hora, estoy usando moment.js para la conversión de zona horaria. Datetimepicker funciona bien fuera del modal pero no se muestra en el modal.

Mi código -

 <label class="w-100" for="nothing">Date & Time </label> <div class="input-group date" id="DateTime"> <input type="text" class="form-control" required placeholder="MM/DD/YYYY HH:MM:SS A"/> <div class="input-group-addon input-group-append"> <div class="input-group-text"> <i class="fa fa-calendar"></i> </div> </div> </div>

Javascript -

 $(document).ready(function(){ moment.tz.setDefault("America/Detroit"); $('#DateTime').datetimepicker({ "keepOpen":false, "format": 'MM/DD/YYYY HH:mm:ss A', "useCurrent": false, "sideBySide": false, "widgetPositioning": { horizontal: 'right', vertical: 'bottom' }, "icons": { time: "fa fa-clock-o", date: "fa fa-calendar", } }).on("dp.change", function (e) { var scope = angular.element(document.getElementById("angularController")).scope(); if($('#DateTime').datetimepicker('date')!==null) { scope.data.date= $('#DateTime').datetimepicker('date').utc() scope.$apply(); } }); });

Intenté dar z-index a DateTime div id pero aún no funciona. código-

 <style> #DateTime{ z-index: 99999 !important; } </style>

Cómo puedo resolver este problema ? Por favor ayuda