Casey Crookston Casey Crookston - 25 days ago 10
jQuery Question

Unable to resolve Uncaught TypeError: $(...).datepicker is not a function

I know there are a ton of threads on this already. I've read many of them and tried the solutions in them, all to no avail.

Here's what I've got in my head:

<script src="/Areas/IRF/Scripts/jquery-2.1.3.js"></script>
<script src="/Areas/IRF/Scripts/jquery.inputmask/jquery.inputmask.js"></script>
<script src="/Areas/IRF/Scripts/jquery.validate.js"></script>
<script src="/Areas/IRF/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Areas/IRF/Scripts/moment.js"></script>
<script src="/Areas/IRF/Scripts/bootstrap-datetimepicker.js"></script>
<script src="/Areas/IRF/Plugins/PNotify/pnotify.custom.min.js"></script>
<script src="/Areas/IRF/Scripts/CustomModules/app-notifications.js"></script>


And some CSS files:

<link href="/Areas/IRF/Content/bootstrap.css" rel="stylesheet" />
<link href="/Areas/IRF/Content/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="/Areas/IRF/Content/typeahead.css" rel="stylesheet" />
<link href="/Areas/IRF/Content/site.css" rel="stylesheet" />
<link href="/Areas/IRF/Plugins/PNotify/pnotify.custom.min.css" rel="stylesheet" />
<link href="/Areas/IRF/Content/irf-theme.css" rel="stylesheet" />
<link href="/Areas/IRF/Plugins/Qtip/jquery.qtip.min.css" rel="stylesheet" />


Then...

<script type="text/javascript">
$(document).ready(function () {
... some stuff
});

$(function () {
$('.RequestedResponseDate').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});
});
</script>


And finally...

<div class="input-group date" data-provide="datepicker">
<input class="form-control datepicker valid" data-val="true" data-val-date="The field Requested Response Date must be a date." id="RequestedResponseDate" name="RequestedResponseDate" placeholder="MM/DD/YYYY" type="text" value="" aria-describedby="RequestedResponseDate-error">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>


I am getting this error:

New:514 Uncaught TypeError: $(...).datepicker is not a function
(anonymous function) @ New:514fire @ jquery-2.1.3.js:3094
self.fireWith @ jquery-2.1.3.js:3206
jQuery.extend.ready @ jquery-2.1.3.js:3412
completed @ jquery-2.1.3.js:3428


I have tried to re-order where the ref to jquery-2.1.3.js is located (moving it down) but that just causes other problems. I have also tried adding $.noConflict();

$.noConflict();
$(function () {
$('.RequestedResponseDate').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});


But then the same error shows up twice!

Uncaught TypeError: $ is not a function
(anonymous function) @ New:514

Answer

The problem ended up being a missing reference to jquery-ui.js