Laravel 5.2 datepicker

Question

For days, I'm trying to get Datepicker functionality in my web application (based on Laravel 5.2). Can't get it to work.

In the head section of my layout file I add:

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

and at the bottom I have

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

In the view file I have

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

I'm seeing the date field but when I click on it, it simply tries to open the dateselector, but it appears empty (so no dates inside)

Suggestions welcome!

Note: screenshot here

Provide a screen-shot of how the date selector looks like when you focus the input field. — Frisbetarian-Support Palestine
– Frisbetarian-Support Palestine, Commented Jun 21, 2016 at 11:52

just_chris · Accepted Answer · 2016-06-23 13:45:01Z

2

As said above, it looks like you need to add bootstrap CSS to your app.

If you intend to use datepicker (or any other bootstrap elements) in more than 1 view then I would add it to your layout view, it will make life a lot easier than adding it to each file.

If you have added the files locally to your project to public/assets/css then call them with the below.

<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap.min.css')}}"/>  
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-responsive.min.css')}}"/>

OR

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

answered Jun 23, 2016 at 13:45

just_chris

15411 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Frisbetarian-Support Palestine · Accepted Answer · 2016-06-21 09:35:08Z

0

You might need to add bootstrap.css as well. The styling of the elements in the calendar takes from that stylesheet.

answered Jun 21, 2016 at 9:35

Frisbetarian-Support Palestine

1,3011 gold badge13 silver badges29 bronze badges

Comments

Himanshu Raval · Accepted Answer · 2016-06-21 10:07:58Z

0

Include bootstrap styles and javascript files. they are required to use bootstrap-datepicker.

answered Jun 21, 2016 at 10:07

Himanshu Raval

8119 silver badges21 bronze badges

2 Comments

wiwa1978 Over a year ago

The rest of my app already has the bootstrap style so they are included for sure.

wiwa1978 Over a year ago

I have now manually added the css and js files to 'resources>css' and 'resources>js' and then run gulp. Didn't change anything.

Collectives™ on Stack Overflow

Laravel 5.2 datepicker

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related