Laravel Filament v3.1 and Carbon how to update PlaceHolder content dynamicaly

Question

I would like to calculate the duration mesuring the diferance in time between two imput fields. And pass the result to a placeholder.

I have a laravel 10.x using filament PHP 3.1 on the form builder for my model resource I have two timepiker fields and a PlaceHolder.

I can do something similar populating a textfield and setting it to disaibled but i feel like this should be cleaner.

However its not working. Ive also tryed parcing the time instances and no matter what I do I either get a trailing error, nothing happenss.

Im guessing that the problem is that I cant use SET on a placeholder. Any ideas?

use Carbon\Carbon;
....

Forms\Components\TimePicker::make('startTime')->live()
                      
Forms\Components\TimePicker::make('endTime')
                ->live()
                ->afterStateUpdated(function (Get $get, Set $set) {
                         if ($get('dia_hora_inicio') !== '' && $get('dia_hora_final') !== '') {
                             $startTime = $get('startTime');
                             $endTime = $get('endTime');

                  // Convert starting and ending times to Carbon instances
                            $startDateTime = Carbon::createFromFormat('H:i:s', $startTime);
                            $endDateTime = Carbon::createFromFormat('H:i:s', $endTime);
                  // Calculate the time difference
                           $timeDifference = $endDateTime->diff($startDateTime)->format('%H:%I:%S');
                  // Set the value of the 'duracion' field to the calculated time difference
                                $set('duration', $timeDifference);
                            }
                            return '';
                        }),
 // Target field
 Forms\Components\PlaceHolder::make('duration')
                        ->live()
                        ->visible(function (Get $get) {
                            // Get value from venta_lineas_id
                            $startDateTime = $get('startTime');
                            $endDateTime = $get('endTime');
                            $date = $get('date');
   
                            return $date && ($startDateTime !== '' && $endDateTime !== '');
                        })
                        ->content('foo'),

Any ideas?

Answer 1

hi, i also had that type of requirment few days ago so i write below code for that and it works

TextInput::make('time')
    ->markAsRequired()
    ->label('Time')
    ->rules('required')
    ->afterStateUpdated(function (Get $get, Set $set) {
         $time = $get('time');
         $duration = (int) $get('duration');
         $end_time = Carbon::parse($time)->addMinutes($duration)->format('H:i:s');
         ($duration >= 1) ? $set('end_time', $end_time) : $set('end_time', '');
    }),
            TextInput::make('duration')
                ->markAsRequired()
                ->numeric()
                ->suffixIcon('heroicon-m-clock')
                ->rules('required')
                ->live()
                ->afterStateUpdated(function (Get $get, Set $set) {
                    $time = $get('time');
                    $duration = (int) $get('duration');
                    $end_time = Carbon::parse($time)->addMinutes($duration)->format('H:i:s');
                    ($duration >= 1) ? $set('end_time', $end_time) : $set('end_time', '');
                }),
            TextInput::make('end_time')
                ->markAsRequired()
                ->readOnly()
                ->rules('required'),

• just change logic to your requirement.
• and use textinput instead and make it disable

and sorry for my english, it's not good

Answer 2

Well, Placeholder::content's parameter can also be a callback that will be evaluated dynamically even on changes to other fields (which need to be marked ->live()):

Forms\Components\PlaceHolder::make('duration')
    // [...]
    ->content(function (Get $get, Set $set) {
        if ($get('dia_hora_inicio') !== '' && $get('dia_hora_final') !== '') {
            $startTime = $get('startTime');
            $endTime = $get('endTime');

            // Convert starting and ending times to Carbon instances
            $startDateTime = Carbon::createFromFormat('H:i:s', $startTime);
            $endDateTime = Carbon::createFromFormat('H:i:s', $endTime);
            // Calculate the time difference
            $timeDifference = $endDateTime->diff($startDateTime)->format('%H:%I:%S');

            return $timeDifference;
        }
        return '';
    })