CODEWITHSUNDEEP
jquerylaravel-bladebootstrap-datepickerlaravel-5.6
m5kev4n
m5kev4n

Reputation: 571

bootstrap datepicker not working laravel blade

i'm having a problem with bootstrap datepicker. I've read lots of questions here, and seemed like i did everything right. But still, i the datepicker wont show up.

Here's my head section of app.blade.php:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css">
</head>

Here's my script reference part of the app.blade.php:

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.datepicker').datepicker();
        });
    </script>

Here's where i control where i try to use the datepicker:

<div class="input-group">
                <input type="text" class="form-control" data-provide="datepicker">
                <div class="input-group-addon">
                    <span class="glyphicon glyphicon-th"></span>
                </div>
            </div>

Upvotes: 0

Views: 5537

Answers (2)

Mahesh Yadav
Mahesh Yadav

Reputation: 2684

Please follow below, if you want to use jQuery UI Datepicker

Move this line of code 

<script src="{{ asset('js/app.js') }}" defer></script>

From head to bottom, it should look like as below in you layout file (app.blade.php)

    <script src="{{ asset('js/app.js') }}"></script>
    @yield('scripts')
    </body>
</html>

In your blade file use the below code.

@section('scripts')
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
            $( ".datepicker" ).datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
@endsection

I hop you already added a input box with class "datepicker", so that click on that will open datepicker. I have used this one

<input class="form-control datepicker" placeholder="Select Date" name="date" type="text">

It works for me, Thanks !!

Upvotes: 3

m5kev4n
m5kev4n

Reputation: 571

Thanks you everyone....it didnt occur to me to check console log until u guys remind me. Thanks, i figured out the problem. There was problem with the integrity of Jquery, so i remove the integrity attribute, and modified my script to this: 

<script>
        (function() {
            $('.datepicker').datepicker();
        });
    </script>

Upvotes: 0

Related Questions