Object does not support datepicker property or method
I am trying to put a datepicker on my page and get this error. I've already searched and searched for other answers to this error, but couldn't find it.
Without the FOR BOOTSTRAP part, it works; but with this I am getting this error. What is the reason for this and how can I fix it?
Here is mine index.cshtml
:
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/Chart")
@Scripts.Render("~/bundles/moment")
<meta charset="utf-8" />
<title>ENOCTA DASHBOARD</title>
<!-- FOR DATEPICKER -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
<!-- FOR BOOTSTRAP -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
+3
source to share
1 answer
You have 2 versions of jQuery in the page, the jQuery UI datepicker hangs in the first version, then the second overwrites the first, and thus the datapick is not available when the event fires DOMContentReady
. The solution is to move the second jquery include up and remove the first one:
<!-- FOR DATEPICKER -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#datepicker").datepicker();
});
</script>
<!-- FOR BOOTSTRAP -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+2
source to share