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
