Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument.<anonymous> Laravel

Question

我正在尝试使用 'datepicker' jquery 并且此错误显示在控制台中，我搜索了很多并且我认为错误在（CDN 链接）中，并尝试了很多解决方案但没有方式。

blade 包含脚本错误的页面：

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row justify-content-center">

            <label for="from">From</label>
            <input type="text" id="from" name="from">
            <label for="to">to</label>
            <input type="text" id="to" name="to">

        </div>
    </div>
@endsection

@section('scriptForm')
    <script>
        $( function() {
            var dateFormat = "mm/dd/yy",
                from = $( "#from" )
                    .datepicker({
                        defaultDate: "+1w",
                        changeMonth: true,
                        numberOfMonths: 3
                    })
                    .on( "change", function() {
                        to.datepicker( "option", "minDate", getDate( this ) );
                    }),
                to = $( "#to" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 3
                })
                    .on( "change", function() {
                        from.datepicker( "option", "maxDate", getDate( this ) );
                    });

            function getDate( element ) {
                var date;
                try {
                    date = $.datepicker.parseDate( dateFormat, element.value );
                } catch( error ) {
                    date = null;
                }

                return date;
            }
        } );
    </script>

    @stop

我在 (head) 标签中扩展的页面中的链接：

  <script src="{{ asset('js/app.js') }}" defer></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

正文前的链接：

<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>
<script src="https://js.pusher.com/6.0/pusher.min.js"></script>
    
 @yield('scriptForm')

你能帮帮我吗

Answer 1

我通过删除 ('layouts.app') 中的这个脚本解决了这个问题：

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

这是 Laravel 默认 JS 文件 (app.js)，位于 public 文件夹中。

Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument.<anonymous> Laravel

Uncaught TypeError: $(...).datepicker is not a function at HTMLDocument.<anonymous> Laravel

jquery

jquery-ui-datepicker