CODEWITHSUNDEEP
jquerylaraveljquery-uilaravel-5.5
Roger
Roger

Reputation: 1693

Datepicker in Laravel 5.5 using Jquery-ui or Bootstrap

I am trying to learn Laravel 5.5 and I am again stuck when I was trying to add a jquery datepicker in my modal window (bootstrap). Due to some unknown reason there is always an error which says:-

$("#last_renewal").datepicker() is not a function

I have properly added all the required files in the header section in the following manner:-

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

Now I am really confused what is the mistake i am doing. Except the datepicker everything in jquery works fine.

Please Suggest

Upvotes: 3

Views: 6400

Answers (5)

Kinya Beatrice
Kinya Beatrice

Reputation: 21

You are missing a link to datepicker plugin. Put this after fontawesome reference. for css use this

<link rel="stylesheet" 
 href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css"/>

for java script plugin

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

Upvotes: 0

Benjamin RD
Benjamin RD

Reputation: 12034

You have to initilize the element with jQuery in the onReady event

<!doctype html>

<html lang="en">
<head>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

<script>
$(function(){
    $("#last_renewal").datepicker()
});
</script>
</head>
<body>

<p>Date: <input type="text" id="last_renewal"></p>



</body>
</html>

Upvotes: 0

Jonathan Chaplin
Jonathan Chaplin

Reputation: 2482

I don't think you need to change your code like @BugFixer is suggesting, but I think you just need to change the order of your script tags. When I put $("#last_renewal").datepicker() before jQuery ui, i see the error you're seeing. Then, when I move it after jquery ui script tag and after the div it works. See my answer below.

By the way, I would have create a fiddle but I had some difficulty getting the order the way I wanted it.:

<!doctype html>

<html lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
  <body>
    <div id="last_renewal">
    </div>
<script>
$("#last_renewal").datepicker()  
</script>
  </body>
</html>

Upvotes: 2

Roger
Roger

Reputation: 1693

Everyone,

I found a way around. It seems that in HTML there is a option where <input type="date" > gives the same output as jquery or any other datepicker. I am still keeping the bounty open and hope this way around method is useful for others. It may be relevant to mention here that it may not work with old browsers.

Upvotes: 1

Bugfixer
Bugfixer

Reputation: 2617

Use this :

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script> 
    $('body').on('focus',"#last_renewal", function(){        
        $(this).datepicker();
    });

</script>

Upvotes: 0

Related Questions