Bootstrap 3 DatePicker not working

Question

Trying to use the datepicker here: http://bootstrap-datepicker.readthedocs.org/en/latest/

I'm not that experienced with jquery yet, but I must be missing something because it never works. Here is my HTML, all of the CSS and JS files are in the respective locations, no issues with being unable to find the files. I'm sure I'm missing something easy, but I don't see it, copying and pasting straight from the examples provided. Let me know what you think.

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
          <form id="main">
            <input type="text">
          </form>
          <script>
           $('#main input').datepicker({
             });
          </script>
        </div>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>    
  </body>
</html>

delete everything after the first
for starters. It's all duplicate. — nathan hayfield, Jan 07 '14 at 23:09
you have to wrap javascript in onready function. it is not working because you have to wait for the javascript to finish loading before you can use it. or do what jasen says so the jquery library loads before it gets to your script. — nathan hayfield, Jan 07 '14 at 23:11
Move your first script block so it's the last script just before `
` — Jasen, Jan 07 '14 at 23:11
@Jasen is right. You're calling the `datepicker` method before it's been defined. Working demo here - http://jsfiddle.net/rm3z6/ — Phil, Jan 07 '14 at 23:14

score 8 · Accepted Answer · edited May 23 '17 at 12:02

8

You have a few issues with your code

You need a document ready handler
You need to place your script last after including the libraries
You have duplicate script tags

Here's what you need to make it work

<!DOCTYPE html>
<html>
<head>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/datepicker.css" rel="stylesheet" />
</head>
<body>

<form id="main">
    <input type="text" />
</form>

<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script>
    $(document).ready(function() {
        $("#main input").datepicker();
    });
</script>
</body>
</html>

edited May 23 '17 at 12:02

Community

1
1

answered Jan 07 '14 at 23:18

Jasen

14,030
3
51
68

2

FYI - your code does **not** need a *document ready* handler. All the DOM elements referenced in the script are available at the time of execution – Phil Jan 07 '14 at 23:41
@Phil Because `#main` is defined above ? I'm interested by resources dealing of this, if you know where I can search. – zessx Jan 08 '14 at 08:25
Yes. The SO post you've linked to in your answer explains it clearly enough – Phil Jan 08 '14 at 11:24
Perfect, thanks. Only issue was this line: '' says ".con" instead of ".com"... took me another 5 mins to figure out why it still wasn't working. Thanks a ton! – watyeag Jan 08 '14 at 18:28
Thanks! It took me so long and reading so many posts to figure this out. Point number 2 worked for me, I had to put my scripts in a @section scripts { – stuzor Dec 05 '15 at 03:41

Bootstrap 3 DatePicker not working

1 Answers1