Uncaught TypeError: $ (...). Datepicker не является функцией (анонимная функция)

Я нашел несколько ответов на переполнение стека, но по-прежнему не могу решить мою проблему. Я работаю на Django, но я не думаю, что это релевантно для этой ошибки.

Я пытаюсь сделать работу с java-скриптом для выбора даты, но получаю ошибку

1:27 Uncaught TypeError: $ (...). 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

Это все мои сценарии:

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

любая обратная связь будет очень оценена

Ответы

Ответ 1

Что пошло не так?

Когда вы включаете 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>

Второй скрипт подключается к jQuery и добавляет $(...).datepicker.

Но тогда вы включаете jQuery еще раз:

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

Он отменяет подключение и, следовательно, $(...).datepicker становится неопределенным.

Несмотря на то, что перед этим появляется первый блок $(document).ready тело функции анонимного обратного вызова не выполняется до тех пор, пока все сценарии не будут загружены, а затем $(...) (точнее, window.$) Относится к наиболее недавно загруженный jQuery.

Вы бы не столкнулись с этим, если вы сразу вызывали $('.dateinput').datepicker а не в $('.dateinput').datepicker $(document).ready, но тогда вам нужно будет убедиться, что целевой элемент (с dateinput класса) уже в документе перед сценарием, и обычно рекомендуется использовать ready обратный вызов.

Решение

Если вы хотите использовать datepicker из jquery-ui, вероятно, было бы разумнее включить скрипт jquery-ui после загрузки. jquery-ui 1.11.4 совместим с jquery 1. 6+, поэтому он будет работать нормально.

В качестве альтернативы (в частности, если вы не используете jquery-ui для чего-либо еще), вы можете попробовать bootstrap-datepicker.

Ответ 2

Вам просто нужно добавить три файла и две ссылки css. Вы можете также cdn. Ссылки для файлов js и css файлов таковы:

  1. jQuery.dataTables.min.js
  2. dataTables.bootstrap.min.js
  3. dataTables.bootstrap.min.css
  4. самозагрузки-datepicker.css
  5. самонастройки-datepicker.js

Они действительны, если вы используете загрузку в своем проекте.

Я надеюсь, что это поможет вам. С уважением, Вивек Сингла

Ответ 3

Ошибка связана с тем, что вы включаете ссылки сценария в двух местах, которые будут выполнять переопределение и повторную инициализацию выбора даты

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

Ответ 4

Включение нескольких ссылок на библиотеку Jquery является причиной ошибки. Включите только одну ссылку на библиотеку Jquery, и это решит проблему.

Ответ 5

если вы используете ASP.NET MVC

На той части, которую вы видите, как показано ниже:

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

Удалить строку "@Scripts.Render(" ~/bundles/jquery ")"

И прошёл как последняя строчка, как показано ниже:

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

Это помогает мне, и надежда помогает вам также.

Ответ 6

Эта ошибка возникает, потому что функция не определена. В моем случае я назвал функцию datepicker без включения файла datepicker js в то время, когда получил эту ошибку.