Filament•14mo ago

TimePicker - Prevent end before start with JS timepicker

When using the TimePicker, the user shouldn't be able to choose an END time before the START time for an event. I found another thread by @Spârky that gave a great solution, but doesn't work with the JS version (->native(false)). I've played with it but can't find the magic formula to get the Carbon instances to compare properly. Has anyone got a solution?

Solution:

Thanks for jumping in though! Maybe the casts are important in the timepicker too!

Jump to solution

4 Replies

DrByte•14mo ago

I haven't set native(false) on my form. The following works without specifying native() or native(false): Model:

    protected $casts = [
        'show_start_date' => 'date',
        'show_end_date' => 'date',
        'submissions_open' => 'datetime',
        'submissions_close' => 'datetime',
   //

    protected $casts = [
        'show_start_date' => 'date',
        'show_end_date' => 'date',
        'submissions_open' => 'datetime',
        'submissions_close' => 'datetime',
   //

Form:

//-->  note: see name of field in make() here:
Forms\Components\DatePicker::make('submissions_open')
                            ->label('Date Submissions Open')
                            ->suffixIcon('heroicon-m-calendar')
                            ->nullable(),

                        Forms\Components\DatePicker::make('submissions_close')
// ---> note ref here:      ->afterOrEqual('submissions_open')
                            ->label('Date Submissions Close')
                            ->suffixIcon('heroicon-m-calendar')
                            ->nullable(),

//-->  note: see name of field in make() here:
Forms\Components\DatePicker::make('submissions_open')
                            ->label('Date Submissions Open')
                            ->suffixIcon('heroicon-m-calendar')
                            ->nullable(),

                        Forms\Components\DatePicker::make('submissions_close')
// ---> note ref here:      ->afterOrEqual('submissions_open')
                            ->label('Date Submissions Close')
                            ->suffixIcon('heroicon-m-calendar')
                            ->nullable(),

Oh duh. I just realized you said TIMEpicker, not DatePicker.

Solution

Jeff•14mo ago

Thanks for jumping in though! Maybe the casts are important in the timepicker too!

DrByte•14mo ago

Ya, they probably are, since you're trying to treat them as Carbon instances.

DrByte•14mo ago

If you feel it may be useful to add a note about casts to the docs in relation to using those components, go ahead and PR it. It may save someone else some time. (or, you might have happen what often happens for me, I start working on fixing it in the docs and discover that it was actually there and I'd glossed over it!)

Gaming

Programming

TimePicker - Prevent end before start with JS timepicker