Borislav Hadzhiev
Tue Oct 19 2021·2 min read
Photo by Raychan
The "$(...).datepicker is not a function" jQuery error occurs for multiple reasons:
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.
<!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>
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.
$(function () { $('#datepicker').datepicker(); $('#datepicker').datepicker('show'); });
If you load the page, you will see the datepicker open.
Also, if you are using a custom jQuery UI library, make sure it includes a datepicker.