TypeError: $(…).datepicker 不是 jQuery 中的函数

TypeError: $(…).datepicker is not a function in jQuery

“$(…).datepicker is not a function” jQuery 错误的发生有多种原因：

忘记包含 jQuery UI 库。
在 jQuery 库之前加载 jQuery UI 库。
加载 jQuery 库两次。
指定了错误的 jQuery 文件路径。
使用没有日期选择器的自定义 jQuery UI 库。

要解决该错误，请确保在加载 jQuery UI 库之前加载 jQuery 库。

这些库只能在页面上加载一次，否则会抛出错误。

索引.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>

请注意，我们首先加载了 jQuery 库，然后加载了 jQuery UI 库。

顺序非常重要，因为如果在 jQuery 之前加载 UI 库，就会出现错误。

这是相关的 JavaScript 代码。

索引.js


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

如果加载页面，您将看到日期选择器打开。

加载脚本的顺序非常重要：

首先加载 jQuery 库。
其次加载 jQuery UI 库。
加载您的个人 JS 脚本（例如index.js）。

确保您没有在同一页面上两次包含 jQuery 脚本。这将重新运行初始化过程并导致错误。

如果您使用自定义 jQuery UI 库，请确保它包含日期选择器。

最后，如果您从本地文件系统上的文件加载 jQuery 库，请确保指定的文件路径正确。

F12您可以通过按下并单击选项卡打开您的开发人员工具来检查您是否正确加载了脚本Console。

如果您看到任何404与加载 jQuery 脚本相关的错误，则文件路径不正确。

结论

要解决“$(…).datepicker is not a function”jQuery 错误，请确保在加载 jQuery UI 库之前加载 jQuery 库。

这些库只能在页面上加载一次，否则会抛出错误。