Filament Date Picker: Disable Dates with Conditions

For the date field, Filament uses the native browser date picker field by default. But we can use a custom date picker to add extra features. In this tutorial, let's disable some dates from being picked: let's turn off selecting the weekend dates for the next month.

To make it work, first, we must set the DatePicker native to false.

Forms\Components\DatePicker::make('appointment_date')
    ->native(false), 

We can disable some dates by adding a disabledDates() method.

This method needs to return an array of dates. Luckily, almost every method in Filament accepts a closure. So, in this closure, we can use Carbon with CarbonPeriod to create an array of weekends from a period of dates.

Forms\Components\DatePicker::make('appointment_date')
    ->native(false)
    ->disabledDates(function () { 
        $start = Carbon::now()->addMonth()->startOfMonth();
        $end = $start->copy()->addMonth()->endOfMonth();
        $period = CarbonPeriod::create($start, $end);
 
        $weekends = [];
        foreach ($period as $date) {
            if ($date->isWeekend()) {
                $weekends[] = $date->format('Y-m-d');
            }
        }
 
        return $weekends;
    }), 

Now, in the date picker, we have all weekend days disabled for the next month.

If you want more Filament examples, you can find more real-life projects on our FilamentExamples.com.