I have written this page of HTML and am having problems locating my datepicker controls using jQuery when I handle an event:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DatePicker error</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
<script src="/lib/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="/lib/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<script src="/lib/bootstrap-datepicker/dist/locales/bootstrap-datepicker.en-GB.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="/lib/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/locales/bootstrap-datepicker.en-GB.min.js" charset="UTF-8"></script>-->
</head>
<body>
<div class="container body-content">
<form id="createBooking" method="post" action="/Booking/Create">
<div class="row" id="page1">
<div class="col-md-4">
<div class="form-group">
<label class="control-label" for="StartDateDate">From</label>
<input id="StartDateDate"
name="StartDateDate"
type="text"
data-date-format="dd/mm/yyyy"
value="18/10/2018"
Title="Create" class="form-control" data-date="10/18/2018" />
<span class="text-danger field-validation-valid" data-valmsg-for="StartDateDate" data-valmsg-replace="true"></span>
</div>
<div class="form-group">
<label class="control-label" for="EndDateDate">From</label>
<input id="EndDateDate"
name="EndDateDate"
type="text"
data-date-format="dd/mm/yyyy"
value="18/10/2018"
Title="Create" class="form-control" data-date="10/18/2018" />
<span class="text-danger field-validation-valid" data-valmsg-for="StartDateDate" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</form>
</div>
<script>
console.log('Binding changeDate handlers');
$('#EndDateDate').datepicker().on('changeDate', function (e) {
//Script fails here with datepicker not defined...
var startDate = $('#StartDateDate').datepicker('getDate');
return true;
});
$('#StartDateDate').datepicker().on('changeDate', function (e) {
//Script fails here with datepicker not defined...
var endDate = $('#EndDateDate').datepicker('getDate');
return true;
});
<!-- </script>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js"></script>-->
</body>
</html>
However, When I run it it fails saying datepicker is not defined in the changeDate event handlers. I am referencing the latest version of all the various libraries.
Has anyone any idea what I am doing wrong? It is defined correctly when the events are attached but the selector method doesn't seem to have it.
Thanks Mark
If you uncomment the cloudfare links at the top it works.
Which would suggest your paths are wrong or the files do not exist in that location. Does the file
/lib/bootstrap-datepicker/dist/locales/bootstrap-datepicker.en-GB.min.jsactually exist?Press F12 in the browser and check the Console.