Date Picker - Livewire

What is the best way to bring in a date picker using Livewire?

I have used Bootstrap for another non-Livewire form and that works well, however the values will not stick when using Livewire.

I just want something that is easy and going to work with Livewire.

I have tried the many examples online using Pikaday, but I get the following error -

InvalidArgumentException
Unable to locate a class or view for component [date-picker].

My code is as follows:

resources/views/livewire/show-report-job-hours.blade.php

    <form wire:submit.prevent="submit">
    <label for="date_start">Event Date</label>
    <x-date-picker
    wire:model="start_date"
    id="start_date"
    autocomplete="off"
    hidden_element="hidden_start_date"
/>

resources/views/livewire/date-picker.blade.php

<div>
    <input
        x-data
        x-ref="input"
        x-init="new Pikaday({
            field: $refs.input,
            format:'M/D/YYYY',
            onSelect: function() {
{{--                console.log(this);--}}
                $('#'+$el.getAttribute('hidden_element')).val( dateToMySqlFormat(this._d) );
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>

app/Http/Livewire/DatePicker.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class DatePicker extends Component
{
    public function render()
    {
        return view('livewire.date-picker');
    }
}

tykus

5 years ago

Level 104

<x-date-picker ... /> would be a Blade Component, not a Livewire component <livewire:date-picker ... />

pokeycam

5 years ago

Level 1

@tykus Thanks for that. I have now modified my code, however the date picker will not display. What am I missing?

resources/views/components/date-picker.blade.php

<div>
    <input
        x-data
        x-ref="input"
        x-init="new Pikaday({
            field: $refs.input,
            format:'M/D/YYYY',
            onSelect: function() {
                $('#'+$el.getAttribute('hidden_element')).val( dateToMySqlFormat(this._d) );
            }
        })"
        type="text"
        {{ $attributes }}
    >
</div>

app/View/Components/datePicker.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class datePicker extends Component
{
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|string
     */
    public function render()
    {
        
        return view('components.date-picker');
    }
}

resources/views/livewire/show-report-job-hours.blade.php

    <x-date-picker
        wire:model="start_date"
        id="start_date"
        autocomplete="off"
        hidden_element="hidden_start_date"
    />

Thanks in advance for any help!

Please or to participate in this conversation.