Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

troccoli's avatar

Pikaday with Livewire 3

I am in the process of upgrading my project from Livewire 2 to 3. It's a very simple project so following the upgrade notes was easy. But now I have an issue with Pikaday. The code is here.

The page in question is resources/views/livewire/generate-events.blade.php. A sanitised extract is the following:

<div x-data x-init="new Pikaday({field: $refs.startDate})">
    <input type="text" x-ref="startDate" wire:model.blur="startDate"/>
</div>

But the date choosen is not passed back to the component, app/Livewire/GenerateEvents.php, and therefore the validation fails, as this fiedl is required.

Does anybody successfully use Pikaday with Livewire 3?

0 likes
7 replies
krekas's avatar

I'm not using pikaday as a alpine inline but in a scrip tag and adding onSelect worked for me. Here's the code I used.

<script>
    let picker = new Pikaday({
        field: document.getElementById('date'),
        format: 'MM/DD/YYYY',
        onSelect: function() {
            @this.set('date', picker.toString())
        }
    })
</script>
1 like
troccoli's avatar

@krekas I can't make it work.

My app.js is very simple

require('./bootstrap');

import {Pikaday} from "pikaday-momentless";
window.Pikaday = Pikaday;

My layout.balde.php uses a stack to inject JS, something like

// ...
@stack('javascript')
</body>
</html>

So in my livewire template I added the following at the bottom

@push('javascript')
    <script>
        let startDatePicker = new Pikaday({
            field: document.getElementById('start-date'),
            onSelect: () => @this.set('start-date', startDatePicker.toString()),

        });
        let endDatePicker = new Pikaday({
            field: document.getElementById('end-date'),
            onSelect: () => @this.set('end-date', endDatePicker.toString()),
        })
    </script>
@endpush

But when I load the page I get an errore in the console

Uncaught ReferenceError: Pikaday is not defined

I appreciate you help.

troccoli's avatar

@krekas

Well, that got rid of the Pikaday is not defined error, but it still doesn't play with Livewire

Please or to participate in this conversation.