JS/jQuery TypeError: jQuery(...).datepicker 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18382788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS/jQuery TypeError: jQuery(...).datepicker is not a function
提问by Iconoclast
I've been scratching my head on this for 2 days, pretty sure I'm just missing something simple but I can't for the life of me figure out why it's not working.
我已经为此挠头 2 天了，很确定我只是遗漏了一些简单的东西，但我一生都无法弄清楚为什么它不起作用。
I'm trying to use the script below on my WordPress site to disable specific dates within a datepicker field in a ContactForm7 form.
我正在尝试在我的 WordPress 网站上使用下面的脚本来禁用 ContactForm7 表单中日期选择器字段中的特定日期。
I can load the script in jsfiddle with a simple input field using the same id and it works perfectly...but when I add it to my site the dates aren't disabled, and there's an error in the JS error console that says "jQuery(...).datepicker is not a function"
我可以使用相同的 id 使用简单的输入字段在 jsfiddle 中加载脚本，它运行良好......但是当我将它添加到我的站点时，日期没有被禁用，并且 JS 错误控制台中出现一个错误，显示“ jQuery(...).datepicker 不是一个函数"
I've added it in my header.phpfile, just below the wp_head()call and just above the </head>tag. I've assigned my datepicker field with the id of dpicklike the script uses.
我已将它添加到我的header.php文件中，就在wp_head()调用下方和</head>标签上方。我已经为我的 datepicker 字段分配dpick了脚本使用的 ID 。
I read that this error is commonly caused when using the $symbol because it can conflict with other jQuery scripts within WordPress...so they suggested replacing $with jQueryinstead (which I've done in the script below)...but I'm still getting the error
我读到这个错误通常是在使用$符号时引起的，因为它可能与 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
});
});
Can't thank you enough for any help you can offer...this seems like such a simple thing but I just can't seem to wrap my head around it!
非常感谢您提供的任何帮助……这似乎是一件很简单的事情，但我似乎无法理解它！
回答by napoleonss
The are several reasons for this error:
导致此错误的几个原因：
- The jquery.ui is used before jquery.
- The $ is used by another library.
- The jquery lib that is referenced locally(wordpress) has different version from that using jquery.ui.
- When the right library and version is referenced the browser cache must be cleared.
- jquery.ui 在 jquery 之前使用。
- $ 被另一个库使用。
- 本地引用的 jquery 库（wordpress）与使用 jquery.ui 的版本不同。
- 当引用正确的库和版本时，必须清除浏览器缓存。
回答by Leniel Maccaferri
I was having the same problem. In my case I had two jQuery script references on my main page (_Layout.cshtmlin ASP.NET MVC). I added 1 reference to jQuery at the top but there was 1 at the bottom of the page that I didn't notice... In Firebug this is what I saw:
我遇到了同样的问题。就我而言，我的主页上有两个 jQuery 脚本引用（_Layout.cshtml在 ASP.NET MVC 中）。我在顶部添加了 1 个对 jQuery 的引用，但在页面底部有 1 个我没有注意到......在 Firebug 中，我看到的是：
So as you can see, jQuery UI was sitting in the middle of the conflict! :D This took me some time to figure out.
如您所见，jQuery UI 正处于冲突之中！:D 这花了我一些时间来弄清楚。
回答by Pratswinz
check if all files are loaded.Should have 200 ok status.
检查是否所有文件都已加载。应该有 200 ok 状态。
回答by cookiesncream
This worked for me, for conflicting jquery codes -
这对我有用，对于冲突的 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>
回答by H0miet
I don't have much experience with wordpress so I might be out of line trying to help. I have used pickadate though.
我对 wordpress 没有太多经验，所以我可能会试图提供帮助。不过我用过pickadate。
In the past I've gotten this error before
过去我曾经遇到过这个错误
Uncaught TypeError: Object [object Object] has no method 'datepicker'
未捕获的类型错误：对象 [object Object] 没有方法“datepicker”
It's usually occurs because I didn't load the js files in the right order. Looking in developer tools on your site I don't see where the pickadate plugin is even loaded. I would check (if you haven't yet) to make sure the plugin is being loaded as well as being loaded in the right order.
这通常是因为我没有按正确的顺序加载 js 文件。查看您网站上的开发人员工具，我什至看不到pickadate 插件的加载位置。我会检查（如果您还没有）以确保插件正在加载以及以正确的顺序加载。
回答by Juno Paulo De Guzman
Okay , I have the same problem a while ago and the solution to the problem is just to add to include the jquery.ui.datepicker.jsit is included in the jquery package. However i am still wondering why I have to include this because Im using jquery.uibefore and the jquery.ui.customor simply the jquery js file will do the .datepicker()function for me.
好的，我前一阵子遇到了同样的问题，解决问题的方法只是添加jquery.ui.datepicker.js包含在 jquery 包中的包含它。但是我仍然想知道为什么我必须包含它，因为我jquery.ui之前使用过，jquery.ui.custom或者只是 jquery js 文件将为.datepicker()我完成这个功能。
Anyway it's still nice it now working . Hope this helps.
无论如何它现在仍然很好用。希望这可以帮助。
回答by Vidmantas Norkus
I moved all scripts from footer to head then things started to work propertly
我将所有脚本从页脚移到了头然后事情开始正常工作
回答by Vishal T
I know this is an old issue. I had this same issue and it was because of including jquery.min.js along with jquery-1.10.2.js and jquery-ui.js. So by removing jquery.min.js my issue of TypeError: $(...).datepicker is not a function got resolved. Hope it helps to someone.
我知道这是一个老问题。我遇到了同样的问题，这是因为包含 jquery.min.js 以及 jquery-1.10.2.js 和 jquery-ui.js。因此，通过删除 jquery.min.js 我的 TypeError 问题： $(...).datepicker is not a function 得到解决。希望它对某人有所帮助。
回答by Miquel Correa Casablanca
I know this question is old but may be It can help other people:
我知道这个问题很老，但可能是它可以帮助其他人：
The best practice to include js in wordpress is to do it using It's queuing function in the php template:
在 wordpress 中包含 js 的最佳实践是使用它在 php 模板中的排队功能：
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
(seen here)
（见这里）
It allows to declare the dependencies of your script, in this case, the jquery datepicker. You can check de built-in scripts that wordpress can provide in:
它允许声明脚本的依赖项，在本例中为 jquery 日期选择器。您可以查看 wordpress 可以提供的内置脚本：
Wordpress provide dependencies specifically for jquery datepicker so you could include your script with something like:
Wordpress 专门为 jquery datepicker 提供依赖项，因此您可以将脚本包含在以下内容中：
wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);
Note that if you only declare the jquery dependency you'll get an error like
请注意，如果您只声明 jquery 依赖项，您将收到类似的错误
'jQuery.datepicker(...) is not a function'
'jQuery.datepicker(...) 不是一个函数'
since the datepicker functions are not included in the base wordpres jquery.
因为 datepicker 函数不包含在基本 wordpres jquery 中。
回答by Web Application Developer
I had a similar issue but only on firefox browser. We are using require to load the js files. I had following lines in my javascript.
我有类似的问题，但仅限于 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 loads js files asynchroulsy and the order is not gauranteed unless you define shim config or if your js files are all loaded as AMD. In our case, jquery was loaded after jquery-ui. We defined in main.js for require that jquery-ui has dependency on jquery. This fixed it for us
要求异步加载 js 文件，并且除非您定义了 shim 配置或者您的 js 文件都作为 AMD 加载，否则不会保证顺序。在我们的例子中，jquery 是在 jquery-ui 之后加载的。我们在 main.js 中为 require 定义了 jquery-ui 对 jquery 的依赖。这为我们修复了它
