Javascript 未捕获的类型错误：$(...).datepicker 不是函数（匿名函数）

Uncaught TypeError: $(...).datepicker is not a function(anonymous function)

提问by Ilya Bibik

I found few answers on stack overflow but still cant resolve my problem. I am running on Django but I dont think it is relevant for this error.

我发现堆栈溢出的答案很少，但仍然无法解决我的问题。我在 Django 上运行，但我认为它与此错误无关。

I try to make work my date picker java script but I am getting the error

我尝试使用我的日期选择器 Java 脚本，但出现错误

1:27 Uncaught TypeError: $(...).datepicker is not a function(anonymous function) @ 1:27fire @ jquery-1.9.1.js:1037self.fireWith @ jquery-1.9.1.js:1148jQuery.extend.ready @ jquery-1.9.1.js:433completed @ jquery-1.9.1.js:103 jquery-2.1.0.min.js:4 XHR finished loading: POST "https://localhost:26143/skypectoc/v1/pnr/parse".l.cors.a.crossDomain.send @ jquery-2.1.0.min.js:4o.extend.ajax @ jquery-2.1.0.min.js:4PNR.findNumbers @ pnr.js:43parseContent @ contentscript.js:385processMutatedElements @ contentscript.js:322

1:27 未捕获的类型错误：$(...).datepicker 不是函数（匿名函数）@ 1:27fire @ jquery-1.9.1.js:1037self.fireWith @ jquery-1.9.1.js:1148jQuery.extend .ready @ jquery-1.9.1.js:433completed @ jquery-1.9.1.js:103 jquery-2.1.0.min.js:4 XHR 加载完毕：POST " https://localhost:26143/skypectoc/v1 /pnr/parse".l.cors.a.crossDomain.send @ jquery-2.1.0.min.js:4o.extend.ajax @ jquery-2.1.0.min.js:4PNR.findNumbers @ pnr.js: 43parseContent @ contentscript.js:385processMutatedElements @ contentscript.js:322

This is all my scripts :

这是我所有的脚本：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>            

any feedback will be very appreciated

任何反馈将不胜感激

回答by szym

What went wrong?

什么地方出了错？

When you include jQuery the first time:

当您第一次包含 jQuery 时：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

The second script plugs itself into jQuery, and "adds" $(...).datepicker.

第二个脚本将自身插入 jQuery，并“添加” $(...).datepicker。

But then you are including jQuery once again:

但是你又一次包含了 jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

It undoes the plugging in and therefore $(...).datepickerbecomes undefined.

它会取消插入并因此$(...).datepicker变得未定义。

Although the first $(document).readyblock appears before that, the anonymous callback function body is not executed until all scripts are loaded, and by then $(...)(window.$to be precise) is referring to the most recently loaded jQuery.

尽管第一个$(document).ready块在此之前出现，但匿名回调函数体直到所有脚本都加载完毕才会执行，并且到那时$(...)（window.$准确地说）是指最近加载的 jQuery。

You would not run into this if you called $('.dateinput').datepickerimmediately rather than in $(document).readycallback, but then you'd need to make sure that the target element (with class dateinput) is already in the document before the script, and it's generally advised to use the readycallback.

如果您$('.dateinput').datepicker立即调用而不是在$(document).ready回调中调用，则不会遇到这种情况，但是您需要确保目标元素（带有 class dateinput）已经在脚本之前的文档中，并且通常建议使用ready回调。

Solution

解决方案

If you want to use datepickerfrom jquery-ui, it would probably make most sense to include the jquery-ui script afterbootstrap. jquery-ui 1.11.4 is compatible with jquery 1.6+ so it will work fine.

如果您想datepicker从 jquery-ui 使用，在引导程序之后包含 jquery-ui 脚本可能最有意义。jquery-ui 1.11.4 与 jquery 1.6+ 兼容，所以它可以正常工作。

Alternatively (in particular if you are not using jquery-ui for anything else), you could try bootstrap-datepicker.

或者（特别是如果您没有将 jquery-ui 用于其他任何用途），您可以尝试bootstrap-datepicker。

回答by Mauro Candido

if you are using ASP.NET MVC

如果您使用的是 ASP.NET MVC

Openthe layout file "_Layout.cshtml"or your custom one

打开布局文件“_Layout.cshtml”或您的自定义文件

At the part of the code you see, as below:

在您看到的代码部分，如下所示：

@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jquery")

Removethe line "@Scripts.Render("~/bundles/jquery")"

删除行“ @ Scripts.Render（” 〜/捆绑/ jquery的“） ”

(at the part of the code you see) past as the latestline, as below:

（在您看到的代码部分）作为最新行过去，如下所示：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")

This help me and hope helps you as well.

这对我有帮助，希望对你也有帮助。

回答by user8994237

You just need to add three file and two css links. You can either cdn's as well. Links for the js files and css files are as such :-

您只需要添加三个文件和两个 css 链接。你也可以使用cdn。js 文件和 css 文件的链接如下：-

1. jQuery.dataTables.min.js
2. dataTables.bootstrap.min.js
3. dataTables.bootstrap.min.css
4. bootstrap-datepicker.css
5. bootstrap-datepicker.js

1. jQuery.dataTables.min.js
2. dataTables.bootstrap.min.js
3. dataTables.bootstrap.min.css
4. bootstrap-datepicker.css
5. bootstrap-datepicker.js

They are valid if you are using bootstrap in your project.

如果您在项目中使用引导程序，它们是有效的。

I hope this will help you. Regards, Vivek Singla

我希望这能帮到您。问候， Vivek Singla

回答by anvesh

The error is because you are including the script links at two places which will do the override and re-initialization of date-picker

错误是因为您在两个地方包含了脚本链接，这些链接将覆盖和重新初始化日期选择器

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

So exclude either src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

所以排除src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

or src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"

或 src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"

It will work..

它会工作..

回答by Joktan Okpanachi

Including more than one reference to Jquery library is the reason for the error Only Include one reference to the Jquery library and that will resolve the issue

包含多个对 Jquery 库的引用是错误的原因Only Include one reference to the Jquery library，这将解决问题

回答by vaishali

This error is occur,because the function is not defined. In my case i have called the datepicker function without including the datepicker js file that time I got this error.

发生此错误，因为未定义函数。在我的情况下，我调用了 datepicker 函数，但在我收到此错误时不包括 datepicker js 文件。