Why is my Bootstrap datetimepicker not working?

Question

Hi I've added a bootstrap datetimepicker to my website but it seems like it's not working. I Am I missing something? or doing something wrong? Please help.The control is in a bootstrap modal but as far as I know it doesn't restrict your accessibility which is the only reason I can think of for it not working...

This is the referances I have:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" href="css/jquery.bootstrap-touchspin.min.css" />
<link rel="stylesheet" href="css/jquery.contextmenu.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mycss.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />

<script src="js/bootstrap.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>
<script src="js/jquery.contextmenu.min.js"></script>
<script src="Scripts/bootstrap-datetimepicker.min.js"></script>

this is my control:

<div class="row" id="div9" runat="server">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="margin-top: 5px">
         <asp:Label ID="Label14" runat="server" Text="Start Date" CssClass="form-control" Font-Bold="true" ForeColor="Black" Font-Size="14px"></asp:Label>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
        <asp:TextBox ID="txt_start_date" runat="server" CssClass="form-control" TextMode="SingleLine" Width="100%" ForeColor="Black" Font-Bold="True"></asp:TextBox>
    </div>
</div>

and this is my script:

<script type="text/javascript">
       $(function () {
            $('#txt_start_date').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: true });
            });
       });
</script>

Answer 1

Boostrap 4 not support datetimepicker. Change file bootstrap-datetimepicker.min.js

'collapse in' 

expanded = $parent.find('.in'),
closed = $parent.find('.collapse:not(.in)'),

expanded.removeClass('in');
closed.addClass('in');

to

'collapse show'


expanded = $parent.find('.show'),
closed = $parent.find('.collapse:not(.show)'),

expanded.removeClass('show');
 closed.addClass('show');

Answer 2

Try this code, no need to use Jquery. Use input type date instead of text.

<input type="date" class="form-control"/>

Working Fiddle with & without Jquery