Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I am posting this in the Javascript section, but it is also a Laravel question.
I am trying to pass an array into the Flatpickr disable function, but it either does not seem to work at all or it only grabs the first date. Here are the two examples of what I have tried.
In my controller I do this to get them all: ` public function render() {
return view('livewire.booking-form',[
'durations' => Duration::all(),
'bookings' => Booking::all()->pluck('booked_date'),
]);
}
In the Flatpickr script: `
document.addEventListener('alpine:init', () => {
Alpine.data('datepicker', () => ({
init() {
flatpickr(this.$refs.myDatePicker, {
// dateFormat: "m-d-Y",
disable: [
"{{$bookings}}"
],
});
}
}))
})
When I do a DD I see all the dates, but when I check on Flatpickr it only shows the first date disabled.
The second method I tried was this: ` public function render() {
return view('livewire.booking-form',[
'durations' => Duration::all(),
'bookings' => Booking::all(),
]);
}
` document.addEventListener('alpine:init', () => { Alpine.data('datepicker', () => ({
init() {
flatpickr(this.$refs.myDatePicker, {
// dateFormat: "m-d-Y",
disable: [
],
@foreach($bookings as $booking )
data.push({ '{{ $booking->booked_date }}' });
@endforeach
});
}
}))
})
This method just seems to break flatpickr altogether. Any help is appreciated.
Firstly, make the dates match the match the format
In your controller
$dates = $bookings->map( fn($b) $b->booked_date->format('Y-m-d'));
You can use @json to convert your array to JavaScript object.
init() {
flatpickr(this.$refs.myDatePicker, {
dateFormat: "Y-m-d",
disable: @json($dates)
});
}
}))
@MohamedTammam I tried adding this to my Livewire controller, but I get an error that $bookings are not defined.
public function render()
{
$dates = $bookings->map(function($b) {
$b->booked_date->format('Y-m-d');
});
return view('livewire.booking-form',[
'durations' => Duration::all(),
'bookings' => Booking::all(),
]);
}
Should this be in it's own function?
public function render()
{
$bookings = Booking::all();
$dates = $bookings->map(function($b) {
$b->booked_date->format('Y-m-d');
});
return view('livewire.booking-form',[
'durations' => Duration::all(),
'bookings' => $bookings,
'dates' => $dates,
]);
}
@MohamedTammam ahhhh, yes that totally makes sense now. I was getting an error:
"Call to a member function format() on string"
So I did:
protected $dates = ['booked_date'];
on my Model. But not the array is completely empty.
@mohamedtammam I ended up getting this to work and was no need to format the dates. It just had to do with where I was accessing the booked dates in my controller. Here is what I ended up with
public function render()
{
$bookings = Booking::all()->pluck('booked_date');
return view('livewire.booking-form',[
'durations' => Duration::all(),
'bookings' => $bookings,
]);
}
@nscott no you shouldn't do this, you are pluck in a collection
$bookings = Booking::all()->pluck('booked_date');
try this
$bookings = Booking::get('booked_date');
@newbie360 why should this not be done? Also, the solution you propose does not work as the only thing that I need is the booked_date column and what you propose gives me everything.
you are query to load all data to memory then pluck the 'booked_date', this cost is high
$bookings = Booking::all()->pluck('booked_date');
just make a simple test... check the sql with this code
\DB::enableQueryLog();
$a = Booking::all()->pluck('booked_date');
$b = Booking::pluck('booked_date');
$c = Booking::get('booked_date');
dd(\DB::getQueryLog());
depends how to prepare your data, you may...
$b = Booking::pluck('booked_date')->toArray();
$c = Booking::get('booked_date')->toArray();
@newbie360 ah yes I can see the difference in the load times, that can really add up. But I do need to still use pluck for this to work properly, so this Booking::pluck('booked_date')->toArray(); ended up helping me get the results.
Please or to participate in this conversation.