Filament•13mo ago

How to type in the datepicker input box?

For ease of use I would like to be able to type into the datepicker input box instead of having to use the datepicker. This can be sort of achieved with the following code:

TextInput::make($name)
    ->mask('99/99/9999')
    ->placeholder(__('23/06/1912'))
    ->dehydrateStateUsing(
        fn (string $state): ?Carbon => $state
            ? Carbon::createFromFormat(static::$format, $state)
            : null
    );

TextInput::make($name)
    ->mask('99/99/9999')
    ->placeholder(__('23/06/1912'))
    ->dehydrateStateUsing(
        fn (string $state): ?Carbon => $state
            ? Carbon::createFromFormat(static::$format, $state)
            : null
    );

The downside of this approach is that you lose access to the minDate() and maxDate() methods. Is there a way to have the best of both worlds?

3 Replies

Proculair B.V.OP•13mo ago

Hahaha I've found quite an easy solution. It is not perfect but by setting ->native() the input becomes typable. I'd rather have the nicer interface of filament but for now this works

toeknee•13mo ago

->native() uses the native browser functionality for a date picker.

Proculair B.V.OP•13mo ago

Yeah not the most uniform experience across browsers but good enough :D

Gaming

Programming

How to type in the datepicker input box?