Filament•5mo ago

Duration / Time Span input

I saw that filament has a time input, but for my case is more a duration, like from 30 min to 50 hours, I was wordering if is possible something with the tools that filament offers, someone have a idea ?

3 Replies

awcodes•5mo ago

There’s not even a native html element for time based duration. And I’ve never seen one anywhere.

Igor•5mo ago

I was thinking in two fields, one for hour and other to minutes, and the final value will be the hour * 60 + minutes, I know how to do it in react, but in livewire and filament no, other problem will be the return value to fill it. Anyway, I did here with a field type numeric, and for 30 min for e example the use should input 0.5, 1 for 1 hour etc, it's no ideal, but I can manage this

awcodes•5mo ago

I have this monstrosity in one of my packages to convert time into seconds. Lol

TimePicker::make('start_at')
                        ->label(trans('filament-tiptap-editor::oembed-modal.labels.start_at'))
                        ->reactive()
                        ->date(false)
                        ->afterStateHydrated(function (TimePicker $component, $state): void {
                            if (! $state) {
                                return;
                            }

                            $state = CarbonInterval::seconds($state)->cascade();
                            $component->state(Carbon::parse($state->h . ':' . $state->i . ':' . $state->s)->format('Y-m-d H:i:s'));
                        })
                        ->dehydrateStateUsing(function ($state): int {
                            if (! $state) {
                                return 0;
                            }

                            return Carbon::parse($state)->diffInSeconds('00:00:00');
                        }),

TimePicker::make('start_at')
                        ->label(trans('filament-tiptap-editor::oembed-modal.labels.start_at'))
                        ->reactive()
                        ->date(false)
                        ->afterStateHydrated(function (TimePicker $component, $state): void {
                            if (! $state) {
                                return;
                            }

                            $state = CarbonInterval::seconds($state)->cascade();
                            $component->state(Carbon::parse($state->h . ':' . $state->i . ':' . $state->s)->format('Y-m-d H:i:s'));
                        })
                        ->dehydrateStateUsing(function ($state): int {
                            if (! $state) {
                                return 0;
                            }

                            return Carbon::parse($state)->diffInSeconds('00:00:00');
                        }),

Gaming

Programming

Duration / Time Span input