Solve - $(...).datepicker is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Raychan

Solve - $(...).datepicker is not a function #

The "$(...).datepicker is not a function" jQuery error occurs for multiple reasons:

  1. Forgetting to include the jQuery UI library.
  2. Loading the jQuery UI library before the jQuery library.
  3. Loading the jQuery library twice.
  4. Specifying an incorrect path to the jQuery files.
  5. Using a custom jQuery UI library that does not have a datepicker.

To solve the "$(...).datepicker is not a function" jQuery error, make sure to load the jQuery library before loading the jQuery UI library. The libraries have to be loaded only once on the page, otherwise the error is thrown.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <!-- ✅ Load CSS file for jQuery ui --> <link href="https://code.jquery.com/ui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" /> <!-- ✅ load jQuery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ load jquery UI ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> </head> <body> <p>Date: <input type="text" id="datepicker" /></p> <script src="index.js"></script> </body> </html>
Notice that we first loaded the jQuery library and then the jQuery UI library.

The ordering is very important because if you load the UI library before jQuery, you would get the error.

Here's the related JavaScript code.

index.js
$(function () { $('#datepicker').datepicker(); $('#datepicker').datepicker('show'); });

If you load the page, you will see the datepicker open.

Make sure you don't include the jQuery script twice on the same page. This would re-run the initialization process and cause the error to be thrown.

Also, if you are using a custom jQuery UI library, make sure it includes a datepicker.

Lastly, if you are loading the jQuery libraries from files on your local filesystem, make sure the specified paths to the files are correct. You can do this by opening your console and checking if you have any 404 errors related to the jQuery scripts.
Use the search field on my Home Page to filter through my more than 1,000 articles.