jquery date picker extension library - datepicker

Question

This code snippet runs fine here as just a snippet, but when we add it to the cart the date picker and calender is are both not visible and inspecting in chrome we see:
Uncaught TypeError: $(...).datepicker is not a function
at theme.js?v=5845886865919317655:5165
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
const unavailable = {
dates: ["2020/12/1", "2020/11/25", "2020/11/26", "2020/11/27", "2020/12/11", "2020/12/12", "2020/12/24", "2020/12/25", "2020/12/26", "2020/12/27", "2020/12/31", "2021/1/1"],
days: ["Saturday", "Monday", "Friday", "Sunday"],
};
$("#dateDiv").datepicker({
inline: true,
altField: '#dateInput',
minDate: '+2',
maxDate: '+18',
beforeShowDay: function(date) {
const ymd = date.getFullYear() + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + ("0" + date.getDate()).slice(-2);
const day = date.getDay();
if ($.inArray(ymd, unavailable.dates) < 0 && $.inArray(days[day], unavailable.days) < 0) {
return [true, "enabled", "Book Now"];
} else {
return [false, "disabled", "Booked Out"];
}
},
onSelect: function(dateText) {
$('#dateInput').val(dateText);
}
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<div>
<label for="date">Pick a delivery date:</label>
<input hidden id="dateInput" type="text" name="attributes[date]" required autofocus/>
<div id="dateDiv"></div>
<span class="instructions">We currently ship corals Monday...</span>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>