I got error using datepicker in livewire app

This post was flagged by the community and is temporarily hidden.

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

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 ?

I still got this error. Have anybody use datepicker?

I am using CDNs and I have problems.

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