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

Question

我想在 laravel 7 应用程序的表单中添加 jQuery UI 日期选择器 字段，但我总是得到以下错误消息：

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

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

我至少阅读了十几篇关于如何解决这个问题的不同帖子，我尝试了所有这些帖子，但都没有成功。

我的感觉是我的 laravel 应用程序（可能在 app.js 中？）已经加载了其中一个脚本或者同一脚本的不同版本（可能 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

Answer 1

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

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

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

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

Answer 2

好吧，您实际上是在调用 jquery 两次。一个在应用程序 js 文件中，另一个来自 cdn。你不需要调用 cdn。并且当您在应用程序 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>

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

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

javascript

jquery

datepicker

laravel