在带有 livewire 1.3 的 laravel 7 中，我想从 https://laravel-livewire.com/docs/alpine-js ("Creating A DatePicker Component" docs) 添加日期选择器，但我收到错误：
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>
在我的刀片文件中，我在模态对话框中使用 <x:date-picker，我用 alpinejs 打开它：
<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">×</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 或刀片文件中的结构无效（或包含的文件无序）吗？
谢谢！