ReferenceError: $ is not defined
I have this error message ReferenceError: $ is not defined
This is my header.
<link href="css/global-style.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="screen" href="css/datepicker3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
Following is my JavaScript code
<script type="text/javascript">
$('#sandbox-container .input-daterange').datepicker({
startDate: "today",
calendarWeeks: true,
todayHighlight: true
});
</script>
Following is the HTML
<div class="col-md-12" id="sandbox-container">
<label>Project Duration</label>
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-md form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-md form-control" name="end" />
</div>
</div>
I want to show datepicker on the input tag.
I am using Bootstrap V3.1.
i am using this datepicker
Add jQuery library before your script which uses $ or jQuery so that $ can be identified in scripts.
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Use Google CDN for fast loading:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Add this script inside head tag:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
It's one of the common mistake everybody make while working with jQuery, Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function will endup throwing this error.
Reasons might be
1) Path to jQuery library you included is not correct.
2) Added library after the script were you see that error
To solve this
Load the jquery library beginning of all your javascript files/scripts.
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>