Laravel 7 jQuery UI datepicker: Uncaught TypeError: $(...).datepicker is not a function答案

【问题标题】：Laravel 7 jQuery UI datepicker: Uncaught TypeError: $(…).datepicker is not a functionLaravel 7 jQuery UI datepicker: Uncaught TypeError: $(...).datepicker is not a function
【发布时间】：2020-12-18 21:54:30
【问题描述】：

我想在 laravel 7 应用程序的表单中添加 jQuery UI datepicker 字段，但我总是收到以下错误消息：

未捕获的类型错误：$(...).datepicker 不是函数。

我尝试使用来自here的源代码示例。

我阅读了至少十几篇关于如何解决此问题的不同帖子，在我的情况下尝试了所有这些帖子，但都没有运气。

我的感觉是我的 laravel 应用程序（可能在 app.js 中？）已经加载了一个脚本，或者可能是 datepicker 也使用的同一脚本的不同版本（可能是 jQuery？），这会导致问题。不幸的是，作为 Laravel 的新手，我不知道如何解决这个问题。请参阅下面的一些代码示例，如果您有任何建议，请告诉我。非常感谢！

应用布局文件头：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

查看文件：

@extends('layouts.app')

@section('content')

<form action="" method="post" action="/tour/{id}">
    <!-- CROSS Site Request Forgery Protection -->
    @csrf

    <div class="form-group">
        <label>Date</label><br>
        <input id="datepicker" type="text" />
    </div>
</form>

<script>
    $( function() {
        $( "#datepicker" ).datepicker();
    });
</script> 
@endsection

【问题讨论】：

标签： javascript jquery laravel datepicker

【解决方案1】：

这里你实际上调用了 jquery 两次。一个在 app js 文件中，另一个来自 cdn。你不需要调用cdn。并且当您在 app js 和另一个版本的 jquery 中使用 defer 属性时，两者都是冲突的，因此 datepicker 不是一个函数。您可以简单地删除 defer 属性和额外的 cdn 调用。

<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#datepicker" ).datepicker();
    });
</script>

【讨论】：

像魅力一样工作，谢谢！只是为了我的教育：我怎么知道我已经从 app.js 调用了 jQuery 以及哪个版本？这个文件是由 laravel 框架为我生成的。谢谢！
本应用js通过package.json文件调用所有依赖。你可以在官方文档中查看link。

【解决方案2】：

您的代码在我的本地安装中完美运行。

<script src="{{ asset('js/app.js') }}" defer></script>

尝试删除 app.js 并检查您的库是否发生冲突。

如果没有，请打开您的 insepect 元素并检查您是否有活动的 Internet 连接并且已加载 jquery ui（参见图 2）

【讨论】：