I am facing issue in showing bootstrap's datetimepicker inside modal. I want to make form inside the modal on which I need a datetimepicker to pick date and time, I am using moment.js for timezone conversion. Datetimepicker is working fine outside of the modal but not showing in modal.

My code -

<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();
            }
        });
});

I tried giving z-index to DateTime div id still it is not working. code-

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

How can I resolve this issue ? Please Help