JS/jQuery TypeError: jQuery(...).datepicker 不是函数答案

【问题标题】：JS/jQuery TypeError: jQuery(...).datepicker is not a functionJS/jQuery TypeError: jQuery(...).datepicker 不是函数
【发布时间】：2013-08-25 07:43:47
【问题描述】：

这两天我一直在摸不着头脑，我很确定我只是错过了一些简单的东西，但我一生都无法弄清楚为什么它不起作用。

我正在尝试在我的 WordPress 网站上使用以下脚本来禁用 ContactForm7 表单中日期选择器字段中的特定日期。

我可以使用相同的 id 使用简单的输入字段在 jsfiddle 中加载脚本，并且它运行良好......但是当我将它添加到我的站点时，日期没有被禁用，并且 JS 错误控制台中出现错误上面写着“jQuery(...).datepicker 不是函数”

我已将它添加到我的header.php 文件中，就在wp_head() 调用下方和</head> 标记上方。我已经为我的 datepicker 字段分配了 dpick 的 ID，就像脚本使用的一样。

我读到这个错误通常是在使用 $ 符号时引起的，因为它可能与 WordPress 中的其他 jQuery 脚本冲突......所以他们建议用 jQuery 替换 $ 代替（我已经在下面的脚本）...但我仍然收到错误

var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];

    function unavailable(date) {
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
            if (jQuery.inArray(dmy, unavailableDates) == -1) {
                return [true, ""];
            } else {
                return [false, "", "Unavailable"];
        }
    }

        jQuery(function() {
            jQuery( '#dpick' ).datepicker({
                dateFormat: 'dd MM yy',
                beforeShowDay: unavailable
        });

    });

非常感谢您提供的任何帮助...这似乎是一件很简单的事情，但我似乎无法理解它！

【问题讨论】：

您的网站是否包含 jquery ui 库？
@maverickosama92 是的，我相信这是wp_head() 调用的一部分...当我查看页面的源代码时，我可以看到它正在调用核心 jquery ui 以及一堆特定的 jquery ui 模块
除了 jQuery UI 日期选择器之外，它看起来像所有东西都包含在您的网站上。可能想看看那个。核心不自动包含日期选择器i.imgur.com/Hd9FdsL.png
@vernak2539 所以这是日期选择器本身的问题，而不是脚本的问题？日期选择器包含在我正在使用的 ContactForm7 插件中......它似乎可以正常选择日期（在支持它的浏览器中......我无法让日期选择器在 Firefox/IE/ 中工作Safari，但它在 Chrome/Opera 中运行良好）但我似乎无法让这个日期禁用脚本使用它
@Iconoclast 问题是没有包含 datepicker 文件，并且 jquery 没有该功能可用。因此类型错误。它在 chrome/opera 中工作的原因是因为输入类型是他们目前支持的“日期”，但 FF/IE/Safari 不支持，所以这就是你看到的原因。

标签： javascript jquery wordpress jquery-ui datepicker

【解决方案1】：

这个错误有几个原因：

jquery.ui 在 jquery 之前使用。
$ 被另一个库使用。
本地引用的 jquery lib (wordpress) 与使用 jquery.ui 的版本不同。
当引用正确的库和版本时，必须清除浏览器缓存。

【讨论】：

看起来 jQuery 是在 jQueryUI 之前加载的，所以应该没问题。我没有在脚本中使用 $，所以应该没问题。根据我的 WP 仪表板，一切都是最新的，所以我认为这不是因为 jQuery 版本不同......
jquery.ui 在 jquery 之前使用。这是最常见的原因
我遇到了同样的错误，但由于“$ 被另一个库使用”我要解决这个问题吗？？？
你可以使用立即函数模式来封装'$'。 (function($){...})(your-jQuery-version-here);搜索小部件示例。
对我来说，第二点是通过将其更改为其他变量来解决问题

【解决方案2】：

我遇到了同样的问题。就我而言，我的主页上有两个 jQuery 脚本引用（ASP.NET MVC 中的_Layout.cshtml）。我在顶部添加了 1 个对 jQuery 的引用，但在页面底部有 1 个我没有注意到……在 Firebug 中，这就是我所看到的：

如您所见，jQuery UI 正处于冲突之中！ :D 我花了一些时间才弄清楚。

【讨论】：

帮帮我...所以你删除jquery-ui-1.10.3.js之后的那个

【解决方案3】：

检查是否所有文件都已加载。应该有 200 ok 状态。

【讨论】：

好的，我花了好几个小时寻找这个错误，然后没有加载一个 css 文件......你的回答让我看起来像 Fiddler，现在一切正常......

【解决方案4】：

这对我有用，用于冲突的 jquery 代码 -

  <script>  
  $.noConflict();  //Not to conflict with other scripts
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({
  dateFormat:"yyyy-mm-dd",
  changeMonth: true,
  changeYear: true,
  maxDate: "+0D"
});

});
</script>

【讨论】：

【解决方案5】：

我知道这个问题很老，但可能它可以帮助其他人：

在 wordpress 中包含 js 的最佳做法是在 php 模板中使用它的排队功能：

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

（见here）

它允许声明脚本的依赖关系，在本例中为 jquery datepicker。您可以查看 wordpress 可以提供的内置脚本：

https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress

Wordpress 专门为 jquery datepicker 提供依赖项，因此您可以在脚本中包含以下内容：

wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);

请注意，如果您只声明 jquery 依赖项，您将收到类似

的错误

'jQuery.datepicker(...) 不是函数'

因为 datepicker 函数不包含在基本 wordpres jquery 中。

【讨论】：

【解决方案6】：

我没有太多使用 wordpress 的经验，所以我可能会试图提供帮助。不过我用过pickadate。

以前我也遇到过这个错误

Uncaught TypeError: Object [object Object] has no method 'datepicker'

这通常是因为我没有按正确的顺序加载 js 文件。查看您网站上的开发人员工具，我什至看不到 pickadate 插件的加载位置。我会检查（如果您还没有）以确保插件正在加载以及以正确的顺序加载。

【讨论】：

您知道我需要使用什么参考资料才能使用日期选择器吗？我试过了，还是不行

【解决方案7】：

好的，我前段时间遇到了同样的问题，解决问题的方法是添加包含在 jquery 包中的jquery.ui.datepicker.js。但是我仍然想知道为什么我必须包含这个，因为我之前使用jquery.ui 和jquery.ui.custom 或者只是jquery js 文件将为我执行.datepicker() 函数。

无论如何，它现在仍然很好用。希望这会有所帮助。

【讨论】：

嘿，你能给我这个的cdn吗？找不到

【解决方案8】：

我将所有脚本从页脚移到了头，然后事情开始正常工作

【讨论】：

【解决方案9】：

我知道这是一个老问题。我遇到了同样的问题，这是因为包含 jquery.min.js 以及 jquery-1.10.2.js 和 jquery-ui.js。因此，通过删除 jquery.min.js 我的 TypeError: $(...).datepicker is not a function 问题得到了解决。希望它对某人有所帮助。

【讨论】：

【解决方案10】：

我遇到了类似的问题，但仅限于 firefox 浏览器。我们正在使用 require 来加载 js 文件。我的 javascript 中有以下几行。

require(['jquery', 'jqueryui'], function ($) {
    $(document).ready(function () {
        $("#form1").validationEngine({ bindButtons: $(".bindButton") });

        $("#txtBidDate").datepicker({dateFormat: 'mm-dd-yy'});
        $("#txtInstDate").datepicker({dateFormat: 'mm-dd-yy'});
    });

Require 异步加载 js 文件并且不保证顺序，除非您定义 shim 配置或者如果您的 js 文件全部加载为 AMD。在我们的例子中，jquery 是在 jquery-ui 之后加载的。我们在 main.js 中定义了要求 jquery-ui 对 jquery 的依赖。这为我们解决了问题

【讨论】：