Why is my Bootstrap datetimepicker not working?

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>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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');

'collapse show'


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

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

Method 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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating