JS errors when using DatePicker ->native(false) inside livewire component
I have a custom livewire component outside of ghe admin panel. I'm trying to use the JS DatePicker, however it doesn't seem to the load the JS correctly.
This is the main error I get is:
Alpine Expression Error: Can't find variable: dateTimePickerFormComponent
My code inside the form method:
public function form(Form $form): Form
{
return $form
->schema([
DatePicker::make('arrival')
->native(false)
->disabledDates($this->disabledDates)
->minDate(today())
->closeOnDateSelection()
->format('d/m/Y')
->required(),
])
->statePath('data');
}
And where I'm rending the form in the livewire component:
<div>
<form wire:submit="search" class="-ml-12">
{{ $this->form }}
<div class="px-3">
<x-filament::button type="submit" class="bg-black mt-6 ml-12">
Check Availability
</x-filament::button>
</div>
</form>
<x-filament-actions::modals />
</div>
Any ideas on what I could try, am I doing something wrong when registering the component?9 Replies
Did you set
public array $data = []?
Did you add mount method with $this->form->fill()?Thank you for the reply! Yes I have both of those set, i'm also setting some default values in the fill function.
public ?array $data = [];
public function mount(): void
{
$this->form->fill([
'arrival' => today(),
'departure' => today()->addDays(1),
'guests' => 2,
]);
}With native datepickers is works perfectly.
But with native set to false the JS breaks and it looks like this.
could you share the whole code please?
Yes of course, I've simplified it down to this:
<?php
namespace App\Livewire;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
use Filament\Forms\Form;
use Livewire\Component;
class AccommodationAvailability extends Component implements HasForms
{
use InteractsWithForms;
public ?array $data = [];
public function mount(): void
{
$this->form->fill();
}
public function form(Form $form): Form
{
return $form
->schema([
DatePicker::make('arrival')
->native(false)
->required(),
])
->statePath('data');
}
public function search(): void
{
dd($this->form->getState());
}
public function render()
{
return view('livewire.accommodation-availability');
}
}
Any suggestions of things I could try or where I should be looking to fix this?Have you got any vendor published views?
No I haven't got any vendor views. I've replicated this with a fresh install of Laravel 12 & Filament 3.3, here's the repo if anyone has any time at all to take a look - I would be very appreciative.
https://github.com/rosstopping/filament-datepicker
GitHub
GitHub - rosstopping/filament-datepicker: Trying to identify why JS...
Trying to identify why JS datepicker isn't loading inside livewire component - rosstopping/filament-datepicker
Resolved - I was missing the
@filamentScripts blade tags. Did I miss this in the docs somewhere?