jQuery datepicker未捕獲的TypeError：對象[object Object]沒有方法'datepicker'

Question

我在設置的表單上收到此錯誤：

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

我使用的是Foundation 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-->

Answer 1

JS還可以，但是我更改了HTML。
這是一個工作示例：（ 示例 ）

<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文件中似乎有沖突。

Answer 2

您將不得不實例化datePicker對象。 像這樣：

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

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

Answer 4

就我而言，第二次包含'jquery-ui.custom.min.js'導致了JS沖突。 刪除第二個之后，請正確地包括它。