I got error using datepicker in livewire app

#1

Hello,
In laravel 7 with livewire 1.3
I want to add datepicker from
https://laravel-livewire.com/docs/alpine-js (“Creating A DatePicker Component” docs)
But I get error :

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)

with defined in my resources/views/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>

In layout file resources/views/layouts/app.blade.php I add Pikaday .js and .css files:

<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/[email protected]/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>

As I see installation rules in https://github.com/Pikaday/Pikaday .
What did I miss ? Can it be order of refs in app.blade.php file ?

Thanks!

#2

have you set the script in push('scripts') or in the blade directly?

#3

Yes, in my resources/views/layouts/app.blade.php I have :

<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/[email protected]/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>

and in my blade file I use <x:date-picker in modal dialog, which I open with 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">&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

Can it be that I have invalid structure(or disorder o included files) of /app.blade.php
or in my blade file ?

#4

I still got this error. Have anybody use datepicker?

#5

I am using CDNs and I have problems.

#6

Have you created the Date-picker Blade component? Because the error says it cannot find it.

If yes, where is the date-picker.blade.php file located? By default it should be in views/components

1 Like