Bootstrap 3 DatePicker not working
jquery, twitter-bootstrap, twitter-bootstrap-3
Solution
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>
Problem
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> ```