Menu
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>
818
Because you're defining the code in the head the body and its contents haven't been loaded yet; so the selector finds no elements to initialize datepicker. If you don't want to use document. ready functionality you could also move the script to the end of the body tag. Works perfectly fine now...
As with bootstrap's own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript. For most datepickers, simply set data-provide="datepicker" on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion.
Bootstrap date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code. This documentation may contain syntax introduced in the MDB 4.17. 0 and can be incompatible with previous versions. For old Date Picker documentation please follow the link.
You have a few issues with your code
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
