Jquery datetime picker is opening behiand the ajax popup extender

Question

I am developing an application using .Net. I want to implement datetime picker in my application.

 $(document).ready(function(){
            $('#MainContent_txtTime').datetimepicker();
        });

The textbox 'MainContent_txtTime' control has been placed inside an ajax popup extender and the datetimepicker is not visible as it is opening behind the popup extender. The popup is placed inside an accordion. How could I show it above the textbox?

I have used following .css class

<style type="text/css">
        #ui-datepicker-div {
            z-index: 9999999;
        }
    </style>

It is not working. Any clue?

Thanks

Answer 1

You can use bootstrap datetimepicker with easy way like below:-

You need to add just jquery, datetimepicker scipt, datetimepicker css.

$(function(){
  $('.datepicker').datetimepicker();
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>



<div style="position:relative">
<input type="text" class="datepicker">
</div>