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

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

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

Forgetting to include the jQuery UI library.
Loading the jQuery UI library before the jQuery library.
Loading the jQuery library twice.
Specifying an incorrect path to the jQuery files.
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

Copied!
<!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

Copied!
$(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.

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

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

Join my newsletter

Borislav Hadzhiev