Filament•7mo ago

DatePicker/DateTimePicker alternative with manual typing support

Does anyone here already made a custom DatePicker/DateTimePicker or found an alternative version that allow manual typing ? I really need it and I know some people already asked for it (https://github.com/filamentphp/filament/discussions/6209 and https://github.com/filamentphp/filament/discussions/6817) so maybe I don't have to do it from scratch. Edit : It' s possible to use ->type('datetime-local') , but then I lost all DatePicker great utilities such as firstDayOfWeek(), disabledDates(), minDate() and maxDate(). Yes, minDate() and maxDate() can be replaced by something like ->extraInputAttributes(['max' => now()->isoFormat('YYYY-MM-DDTHH:mm')]), but the problem is that when using TextInput with a specific type, the field is not updated when using refreshFormData and a complete page reload (F5) is necessary. Thanks 🙏

GitHub

Typing in date/timepicker · filamentphp filament · Discussion #6209

The date, time & datetimepickers work great but i want to be able to type in the date and/or time instead of just selecting it with my mouse. Can't seem to find how to enable this. Can anyo...

GitHub

Date picker should allow manual typed input · filamentphp filament ...

The date picker component should allow manual typing in of dates. Having to select dates from the calendar is cumbersome when having a lot of dates to type in. Related: #6209

12 Replies

LeandroFerreira•7mo ago

manual typing what does it mean? Shoudn't ->type('datetime-local') be manual?

Gandalf•7mo ago

I think he means option for inputting the value manually in addition to selecting from the picker

LeandroFerreira•7mo ago

isn't it manual?

Gandalf•7mo ago

It is. That's where I'm at a loss too.

BenjaminOP•7mo ago

Yes it works, but I would love to have this manual input but with the filament picker, not the native one.

BenjaminOP•7mo ago

This input, but this picker :

BenjaminOP•7mo ago

Instead of this one. ~~It's just a comfort and UI concern.~~

BenjaminOP•7mo ago

@Leandro Ferreira The other problem using ->type('datetime-local') is that I lost all DatePicker great utilities such as firstDayOfWeek(), disabledDates(), minDate() and maxDate(). Edit : minDate() and maxDate() can be replaced by something like ->extraInputAttributes(['max' => now()->isoFormat('YYYY-MM-DDTHH:mm')]).

LeandroFerreira•7mo ago

yes, you can use extraInputAttributes..

BenjaminOP•7mo ago

It works, but it's less convenient and less beautiful (code + UI), but it's not a critical thing, I totally agree. Was just asking to know if something here made it to keep the Filament-style consistency across my whole application, nothing else 😉 Alternative solution example :

Forms\Components\TextInput::make('cancelled_at')
  ->label(__('Cancelled at'))
  ->default(now()->isoFormat('YYYY-MM-DDTHH:mm'))
  ->formatStateUsing(fn (?string $state): string => $state ? Date::createFromTimeString($state)->isoFormat('YYYY-MM-DDTHH:mm') : $state)
  ->extraInputAttributes(['max' => now()->isoFormat('YYYY-MM-DDTHH:mm')])
  ->type('datetime-local')
  ->required()

Forms\Components\TextInput::make('cancelled_at')
  ->label(__('Cancelled at'))
  ->default(now()->isoFormat('YYYY-MM-DDTHH:mm'))
  ->formatStateUsing(fn (?string $state): string => $state ? Date::createFromTimeString($state)->isoFormat('YYYY-MM-DDTHH:mm') : $state)
  ->extraInputAttributes(['max' => now()->isoFormat('YYYY-MM-DDTHH:mm')])
  ->type('datetime-local')
  ->required()

BenjaminOP•7mo ago

And, I forgot to mention the main problem : when using TextInput with a specific type, the field is not refresh when using refreshFormData, the page needs to be reload completely :

LeandroFerreira•7mo ago

Could you try fillForm()?

Gaming

Programming

DatePicker/DateTimePicker alternative with manual typing support