CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraplaraveldatepicker
Ricki Moore
Ricki Moore

Reputation: 1223

Datepicker and Laravel 5

Im trying to implement the datepicker.js with my laravel project. I downloaded the css/js and placed them in my assets and called them in the app template. Then I used my Js to call the date-picker on my form using the correct id but nothing is coming up and no errors either. Here is what I have:

App:

    <!doctype html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/assets/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/assets/css/gin_add.css">

    <title>Elephant Gin</title>

</head>
<body>





@yield('main')


<script src="/assets/js/jquery-2.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/gin_add.js"></script>
</body>
</html>

Form-Field:

{!! Form::text('date', null, array('type' => 'text', 'class' => 'form-control datepicker','placeholder' => 'Pick the date this task should be completed', 'id' => 'calendar')) !!}

Javascript:

    $('#calender').datepicker({
    format: "dd/mm/yyyy",
    forceParse: false
});

Upvotes: 0

Views: 8219

Answers (1)

IlGala
IlGala

Reputation: 3419

I was looking around google about Laravel and bootstrap-datepicker and found this link. One of the answer was:

Just Curious.

Did you have jQuery installed before your bootstrap-datepicker.js? Looks like jQuery is a dependency of this bootstrap-datepicker.js

See: http://bootstrap-datepicker.readthedocs.org/en/release/

But it doesn't seem to be your case since you wrote

<script src="/assets/js/jquery-2.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-datepicker.min.js"></script>
<script src="/assets/js/gin_add.js"></script>

but, in my opinion, it may still be a conflict with an existing JQuery datepicker... So as you can read from the official documentation you can set your datepicker in No conflict mode by adding

var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker;                 // give $().bootstrapDP the bootstrap-datepicker functionality

Upvotes: 1

Related Questions