Events & validation

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDatePicker;
use Filament\Schemas\Components\Utilities\Set;

FlexDatePicker::make('start_date')
    ->live()
    ->onChange(function (Set $set, ?string $state): void {
        $set('end_date', $state);
    });

FlexDatePicker::make('date')
    ->live()
    ->afterStateUpdated(function (?string $state, ?string $old): void {
        // Respond to the new date and previous field value.
    });

use Filament\Schemas\Components\Utilities\Get;

return [
    FlexDatePicker::make('starts_on')->live()->required(),
    FlexDatePicker::make('ends_on')
        ->minDate(fn (Get $get) => $get('starts_on'))
        ->required(),
];

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexDateRangeField;

FlexDateRangeField::make('period')
    ->live()
    ->onChange(function (?array $state): void {
        $start = $state['start'] ?? null;
        $end = $state['end'] ?? null;
        // Recompute a report filter using the confirmed selection.
    });

use Bjanczak\FilamentFlexFields\Filament\Forms\Components\FlexTimeField;

FlexTimeField::make('time')
    ->hourCycle(24)
    ->rules([
        function (string $attribute, mixed $value, Closure $fail): void {
            if (is_string($value) && preg_match('/^\d{2}:(\d{2})/', $value, $parts) && (int) $parts[1] % 10 !== 0) {
                $fail('Choose a time on a ten-minute boundary.');
            }
        },
    ]);

FlexDatePicker::make('date')
    ->required()
    ->validationAttribute('appointment date')
    ->segmentInvalidMessage('Enter a complete valid appointment date.');

const form = document.querySelector('#booking-form');

form.addEventListener('fff-date-change', (event) => {
    console.log(event.detail.value);
});

form.addEventListener('fff-time-change', (event) => {
    console.log(event.detail.value);
});

form.addEventListener('fff-date-input', (event) => {
    if (!event.detail.valid) return;
    // Update a local preview for a complete numeric date.
});