Bootstrap is not working under Admin template

Viewed 1063

I am using Bootstrap template https://startbootstrap.com/themes/sb-admin-2/

While debugging through console I'm getting the following error:

Uncaught TypeError: $(...).datetimepicker is not a function

My header section

<!-- Custom fonts for this template-->
<link href="{{URL::asset('vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

<!-- Datepicker stylesheet -->
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

<!-- Datepicker script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<!--  Stylesheet -->
<link href="{{URL::asset('css/sb-admin-2.min.css')}}" rel="stylesheet">

Below is HTML for Bootstrap date picker

<!-- Start of Datepicker -->
<div class="input-group form-group">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
</div>
<!-- End of DatePicker -->
  

<!-- DatePicker Script -->
<script type="text/javascript">
    $(function() {
        $('#datetimepicker1').datetimepicker();
    });
</script>
<!-- End of Datepicker Script -->

Note: I have commented on Datepicker Bootstrap Stylesheet in order to avoid stylesheet overlap issues.

Let me know what I may be doing wrong.

Thanks

1 Answers

Replace

<input type='text' class="form-control" />

with

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

You don't need to write custom code to create date picker. Happy Coding :)

Related