Can someone please help me with this error? Upon checking other solutions they say that they declared the jquery twice that's why it shows. But in my case I only declared the jquery once. Please see the code snippet below:
$(document).ready(() => { $("#datepicker").datepicker({ format: "mm-yyyy", startView: "months", minViewMode: "months" }); })
<html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>My Teasting Website</title> <.--Bootstrap css--> <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css"> <.--bootstrap-datepicker css--> <link rel="stylesheet" href="src/bootstrap-datePicker/css/bootstrap-datetimepicker.min.css"> </head> <body> <input type="text" readonly="readonly" name="date" id = "datepicker"> <span class="add-on"><i class="icon-th"></i></span> <.--Jquery js--> <script src="src/jquery.js"></script> <.--Bootstrap js--> <script src = "src/bootstrap/js/bootstrap.min.js"></script> <!--bootstrap-datepicker js --> <script src="src/bootstrap-datePicker/js/bootstrap-datetimepicker.min.js"></script> <script src = "js/script.js"></script> </body> </html>
and below as you can see is my folder directories and declaration:
The error shown on the console:
Try to follow this example here ...
The difference in your code is that you used id
instead of class
in jquery:
$(document).ready(() => {
$(".datepicker").datepicker({
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
})
Also, change the HTML:
<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>
it looks like bootstrap-datepicker is not loaded correctly make sure your js files paths are correct, I can't really tell if the paths are correct, however, the order of loading scripts is correct. try using a CDN for jquery and bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Teasting Website</title>
<!--Bootstrap css-->
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<!--bootstrap-datepicker css-->
<link rel="stylesheet" href="src/bootstrap-datePicker/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<input type="text" readonly="readonly" name="date" id = "datepicker">
<span class="add-on"><i class="icon-th"></i></span>
<!--Jquery js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(document).ready(() => {
$("#datepicker").datepicker({
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
})
</script>
</body>
</html>
this is working for me, I do not see any error on my console. I just replaced your file paths with CDN. I am sure there is something wrong with your paths
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.