jQuery is a JavaScript library. jQuery makes it easy and fast to build Javascript functions. Datepicker is one of several functions that work with input. If you are getting TypeError: $(…).datepicker is not a function in jQuery when working with datepicker. Read on this article to find out why and how to fix it.
Causes and fixes TypeError: $(…).datepicker is not a function in jQuery.
There are many causes of this error. Here are a few of the main reasons. Along with that is how to fix the error corresponding to each cause.
You have not imported the jQuery UI library.
This is the most common cause. Look at the head tag and the output below to understand the problem.
<head>
<link rel="stylesheet" href="./libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<!-- import jQuery -->
<script src="./libs/jquery/3.6.0/jquery.min.js"></script>
<!-- forget to import jQuery UI HERE -->
<script>
$(function () {
$('#datepicker').datepicker();
});
</script>
</head>Output:
TypeError: $(...).datepicker is not a functionSo, how to fix the error in this case?
Since datepicker() is a method supported by jQuery UI, just importing jQuery is not enough. Datepicker will work if you import both the jQuery library and jQuery UI library before using datepicker. Like this:
<head>
<link rel="stylesheet" href="./libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<!-- import jQuery -->
<script src="./libs/jquery/3.6.0/jquery.min.js"></script>
<!-- import jQuery UI -->
<script src="./libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
$(function() {
$('#datepicker').datepicker();
});
</script>
</head>Output:
Import jquery UI before importing jquery.
JQuery UI is a component built from jQuery. If you import jQuery UI before jQuery, you will not be able to use the jQuery UI library functionality.
<head>
<link rel="stylesheet" href="./libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<!-- import jQuery UI -->
<script src="./libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<!-- import jQuery -->
<script src="./libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function () {
$('#datepicker').datepicker();
});
</script>
</head>Output:
TypeError: $(...).datepicker is not a functionThe solution to this case is very simple, make sure you import jQuery first and then import jQuery UI like the solution above.
You use datepicker on another library.
If you use a library other than jQueryUI, the datepicker() method probably won’t be supported. For example, the rebra_datepicker library uses the Zebra_DatePicker() method instead of the datepicker() method. If you try to use datepicker() in the zebra_datepicker library, it will throw an error. Observe the example below to understand this case better.
<head>
<link rel="stylesheet" href="./libs/default/zebra_datepicker.min.css" />
<!-- import jQuery -->
<script src="./libs/jquery/3.6.0/jquery.min.js"></script>
<!-- import zebra -->
<script src="./libs/zebra_datepicker.min.js"></script>
<script>
$(document).ready(function () {
$('input.datepicker').datepicker();
});
</script>
</head>Output:
TypeError: $(...).datepicker is not a functionIn this case, you must really understand how to use the library. For example, we use the zebra_datepicker library, so instead of calling datepicker(), we should use Zebra_DatePicker() according to zebra_datepicker docs. Like this:
<head>
<link rel="stylesheet" href="./libs/default/zebra_datepicker.min.css" />
<!-- import jQuery -->
<script src="./libs/jquery/3.6.0/jquery.min.js"></script>
<!-- import zebra -->
<script src="./libs/zebra_datepicker.min.js"></script>
<script>
$(document).ready(function () {
// using Zebra_datePicker()
$('input.datepicker').Zebra_DatePicker();
});
</script>
</head>Output:
Above, we have shown you three common causes and solutions for each cause. Countless other minor reasons can lead to TypeError: $(…). Datepicker is not a function in jQuery. But, in general, to avoid this error, you must carefully read the installation and usage section in the jQuery documentation.
Summary
In short, the error “TypeError: $(…).datepicker is not a function” in jQuery is not too difficult to fix. We want you to not only fix this error in jQuery but also be able to fix this same error in many other JS libraries. If any errors make you confused, please comment below.
Have a great day!
Maybe you are interested:
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java
