F
Filament10mo ago
Igor

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
awcodes10mo ago
There’s not even a native html element for time based duration. And I’ve never seen one anywhere.
Igor
IgorOP10mo 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
awcodes10mo 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');
}),
Want results from more Discord servers?
Add your server