我在 livewire 应用程序中使用 datepicker 时出错答案

【问题标题】：I got error using datepicker in livewire app我在 livewire 应用程序中使用 datepicker 时出错
【发布时间】：2020-11-21 06:41:24
【问题描述】：

在带有 livewire 1.3 的 laravel 7 中我想从添加日期选择器 https://laravel-livewire.com/docs/alpine-js（“创建 DatePicker 组件”文档）但我得到错误：

Unable to locate a class or view for component [date-picker]. 
(View: /mnt/_work_sdb8/wwwroot/lar/hostels3/resources/views/livewire/hostel/hostel-view-page.blade.php)

在我的资源/视图/livewire/hostel/hostel-view-page.blade.php 中定义：

    <x:date-picker wire:model="start_date" id="start_date"/>
...

<script>
var picker = new Pikaday({ field: $('#start_date')[0] });


</script>

在布局文件 resources/views/layouts/app.blade.php 我添加 Pikaday .js 和 .css 文件：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    
    <link href="/css/app.css" rel="stylesheet">
    
    
    @livewireStyles
    
    
    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('js/lazyload.js') }}"></script>

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
    
    @livewireScripts
    @stack('scripts')
    
    
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

</head>

正如我在 https://github.com/Pikaday/Pikaday 中看到的安装规则。我错过了什么？可以是 app.blade.php 文件中的引用顺序吗？

修改 #1：

在我的资源/视图/布局/app.blade.php 我有：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Laravel:Livewire</title>
    
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    
    <!-- Styles -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="icon" type="image/png" href="/favicon.ico"/>
    
    <link href="/css/app.css" rel="stylesheet">
    
    
    @livewireStyles
    
    
    <script src="{{ asset('/js/app.js') }}"></script>
    <script src="{{ asset('js/lazyload.js') }}"></script>
    
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
    
    @livewireScripts
    @stack('scripts')
    
    
    <script src="{{ asset('/js/app/app_funcs.js') }}"></script>

</head>

在我的刀片文件中，我在模态对话框中使用

<div class="card item_container">
    
    ...
    
    <div
        class="modal_editor_title card-title"
    >
        <h4 class="modal-title p-2">
            <button class="close" type="button" x-on:click="show_booking_enquiry_modal= false">
                <span aria-hidden="true">&times;</span>
            </button>
        </h4>
    </div> <!-- modal_editor_title -->
    
    <div class="modal_editor_fields card-body" :style="'max-height: ' + ( modalHeight() - 20 ) +'px; overflow-y: scroll;'">
        
        <form class="form-login" wire:submit.prevent="newBookingEnquirySubmit">
            <div class="card">
                <div class="card-body card-block">
                    
                    <h4 class="card-subtitle">Fill your enquery</h4>
                    
                    
                    <dl class="block_2columns_md m-3"> <!-- start_date FIELD DEFINITION -->
                        <dt class="key_values_rows_label_13">
                            <label class="col-form-label" for="start_date">Start date:</label>
                        </dt>
                        <dd class="key_values_rows_value_13">
                            <label for="start_date">Start Date</label>
                            
                            <x:date-picker wire:model="start_date" id="start_date"/>
                            
                            
                            @error('hostelEnqueryForm.start_date')
                            <div class="validation_error">{{ $message }}</div> @enderror
                        </dd>
                    </dl> <!-- <dt class="block_2columns_md m-0"> start_date FIELD DEFINITION -->
                    
                    ...
                
                
                </div> <!-- <div class="card"> -->
            </div> <!-- <div class="card"> -->
        
        </form>
    
    </div>  <!-- modal_editor_fields-->
    
    ...
    
    <div class="modal_editor_footer card-footer row_content_right_aligned">
        <div class="m-2">
            <button wire:click="submitBookingEnquery()" class="btn btn-primary editor_button_submit ml-5" type="button">
                {!! $viewFuncs->showAppIcon('save', 'white') !!} Submit
            </button>
            <button x-on:click="show_booking_enquiry_modal= false" class="btn btn-cancel-action" type="button">
                {!! $viewFuncs->showAppIcon('cancel', 'white') !!} Cancel
            </button>
        </div>
    </div>  <!-- modal_editor_footer -->

</div> <!-- <div class="modal_editor_container"> -->





@push('scripts')
    <script>
        console.log('resources/views/livewire/hostel/hostel-view-page.blade.php inited::')

        function modalHeight() {
            console.log('modalHeight 800::')
            console.log(800)
            return 800;     // I SEE THESE LINES IN CONSOLE
        };
    
    </script>
@endpush

可能是我的 /app.blade.php 结构无效（或包含的文件混乱）还是在我的刀片文件中？

谢谢！

【问题讨论】：

请看 MODIFIED #1

标签： laravel datepicker laravel-livewire

【解决方案1】：

您将 date-picker.blade.php 文件放在哪里？默认目录为views/components

【讨论】：