JS / jQuery TypeError：jQuery（...）。datepicker不是一个函数

Question

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

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

我可以使用相同的id在一个简单的输入字段中加载jsfiddle中的脚本并且它工作正常...但是当我将它添加到我的站点时，日期不会被禁用，并且JS错误控制台中出现错误说“jQuery（...）。datepicker不是函数”

我已将其添加到header.php文件中，位于wp_head()电话下方，</head>标记上方。我已经为我的datepicker字段分配了id dpick，就像脚本使用的那样。

我读到这个错误通常是在使用$符号时引起的，因为它可能与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
        });

    });

对你能提供的任何帮助都不能感谢你......这看起来很简单，但我似乎无法绕过它！

Answer 1

导致此错误的原因有几个：

1. 在jquery之前使用jquery.ui。
2. $由另一个图书馆使用。
3. 本地引用的jquery lib（wordpress）与使用jquery.ui的版本不同。
4. 当引用正确的库和版本时，必须清除浏览器缓存。

Answer 2

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

正如您所看到的，jQuery UI正处于冲突的中间！ ：D我花了一些时间才弄明白。

Answer 3

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

Answer 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>

Answer 5

我没有太多使用wordpress的经验，所以我可能会出错帮助。我曾经使用过pickadate。

过去我在

之前遇到了这个错误

  

未捕获TypeError：对象[object Object]没有方法'datepicker'

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

Answer 6

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

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

Answer 7

我将所有脚本从页脚移到了头部然后开始工作了

Answer 8

我知道这是一个老问题。我有同样的问题，这是因为包括jquery.min.js以及jquery-1.10.2.js和jquery-ui.js。因此，通过删除jquery.min.js我的TypeError问题：$（...）。datepicker不是一个已解决的函数。希望对某人有所帮助。

Answer 9

我知道这个问题已经过时了，但也许可以帮助其他人：

在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中。

Answer 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'});
    });

要求加载js文件asynchroulsy并且除非您定义shim config或者您的js文件都作为AMD加载，否则命令不会被保证。在我们的例子中，jquery是在jquery-ui之后加载的。我们在main.js中定义了jquery-ui依赖于jquery的require。这为我们修好了