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

【问题标题】：jquery datepicker Uncaught TypeError: Object [object Object] has no method 'datepicker'jquery datepicker Uncaught TypeError: Object [object Object] has no method 'datepicker'
【发布时间】：2013-11-12 21:15:25
【问题描述】：

我在设置的表单上遇到此错误：

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

我已经在谷歌上搜索了一段时间，并查看了几篇关于这个问题的帖子。我的 jquery 和 jquery ui 顺序正确，但仍然出现此问题。

我的 html（页脚）

  <!-- Included JS Files (Compressed) -->
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <script src="/javascripts/foundation.min.js"></script>
  <script src="/javascripts/flexy-menu.js"></script>

  <!-- Initialize JS Plugins -->
  <script src="/javascripts/app.js"></script>
  <script src="/javascripts/lma.js"></script>

在 lma.js 中，我调用了 datepicker：

// datepicker 
$(document).ready(function() {
    $('.checkIn, .checkOut').each(function() {
        $(this).datepicker({ dateFormat: 'yy-mm-dd' });
    });
});

我正在使用基础 3，我一生都无法弄清楚为什么我会在控制台中收到 Uncaught TypeErrro。

更新在此处填写代码：

  <div class="six columns bookForm">
      <form id="reserveNow" action="#">

        <label>Check In<br />
          <input type="text" value="02/24/2013" class="checkIn round">
        </label>

        <label>Check Out</br>
          <input type="text" value="02/27/2013" class="round checkOut">
        </label>

      </form>
  </div><!--twelve columns-->

【问题讨论】：

当你打开你的控制台并输入： $.fn.datepicker() 你看到了什么？也许你没有包含 datepicker 插件？
我得到同样的错误，但 jquery-ui 默认包含 datepicker。我什至下载了一个自定义的 jquery ui 并确保 datepicker 在那里，但仍然没有骰子。
很可能您在某处包含另一个 jquery 副本，可能在 app.js 中
foundation.min.js 不加载自己的 jquery 版本吗？如果你忽略它会发生什么？
Erwin，当我删除了基础中包含的 jquery 时，我收到一个关于 jquery 未定义的错误。

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

JS 没问题，但是我改了 HTML。
这是一个工作示例：(Example)

<div class="six columns bookForm">
    <form id="reserveNow" action="#">
        <label for="check-in">Check In</label>
        <input id="check-in" type="text" value="02/24/2013" class="checkIn round" />
        <label for="check-out">Check Out</label>
        <input id="check-out" type="text" value="02/27/2013" class="round checkOut" />
    </form>
</div>
<!--twelve columns-->

尝试新的 HTML，如果它不起作用，那么似乎 JS 文件中存在冲突。

【讨论】：

看起来某处发生了冲突。奇怪的是，这几乎是一个全新的基础安装，还没有任何 javascript 自定义。
尝试注释 js 文件并继续测试一步。或者 jquery 和 jquery UI 的版本之间可能存在冲突？在 js fiddle 我使用 1.9.2 版本的 UI
原来foundation 3，包括jquery，然后在foundation.min.js中也有它，所以一旦我确保我只有一个jquery副本，一切都很好。

【解决方案2】：

您必须实例化 datePicker 对象。像这样的：

 $( "#datepicker" ).datepicker({
        });

【讨论】：

补充说，将 #datepicker 更改为 .checkIn（正确的选择器），然后就不行了。
我在我的本地机器上复制了你的代码，它工作正常。没有问题。

【解决方案3】：

我在使用 jquerytools 时遇到了这个错误，而且似乎我的包含顺序错误。当我将 jquerytools 放在 jquery-ui 之上时，它运行良好：

<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.10.3.min.js"></script>

【讨论】：

【解决方案4】：

在我的情况下，包括 'jquery-ui.custom.min.js' 第二次导致 JS 冲突。删除第二个后正确包含它。

【讨论】：