How to integrate the Bootstrap datepicker

Question

I am currently trying to integrate the bootstrap datepicker, but for some reason it is not working at all. The datepicker is simply not showing like it should.

I have created a jsfiddle here: http://jsfiddle.net/4hmuff8x/ It contains the js code of both the datepicker and bootstrap as well as the css for these.

To explain what I am doing, the following html code is the input where I want the datepicker:

<div class="col-md-10 col-md-offset-1 spacer-below-20">
                                <label>The date</label>
                                <div class="input-group">
                                    <input class="datepicker" type="text" name="date">
                                </div>
                            </div>

Of course I have written a bit of js, which should "link" the input tag to the datepicker:

<script>
            $(function(){
                $('.datepicker').datepicker({
                        format: 'dd.mm.yyyy'
                });
            });
            </script>

I really can't figure out why it is not working. I hope some of you can help me out.

Any help will be greatly appreciated.

Answer 1

In the given fiddle , you are calling the below function before loading the js file into DOM.

$('.datepicker').datepicker({ format: 'dd.mm.yyyy' });

call the script after loading the script or on

$(document).ready(function(){ //code to call })

https://jsfiddle.net/santoshj/4hmuff8x/2/