Filament•4mo ago

Help Needed with DateTimePicker in Repeater

Hi everyone, I've recently started exploring Filament and have encountered a challenge that I haven't been able to resolve despite trying numerous solutions from forums and documentation. Here's a simplified version of my code:

public static function form(Form $form): Form
{
    return $form->schema([
        Grid::make(3)->schema([
            TextInput::make('name')->required()->label('Name'),
            Select::make('contact_id')->required()->searchable()
                ->options(function () {
                    return User::role('ContactPerson')->pluck('name', 'id');
                }),
            DateTimePicker::make('start_time')->required()->prefixIcon('heroicon-m-clock')->format('Y-m-d H:i')->seconds(false),
            Textarea::make('description')->columnSpan(3)->nullable(),

            Section::make()->schema([
                Repeater::make('taskGroups')->relationship('taskGroups')->schema([
                    Grid::make(6)->schema([
                        Select::make('worker_id')->columnSpan(1)->relationship('worker', 'name'),
                        
                        DateTimePicker::make('start_time')
                        ->format('Y-m-d H:i')
                        ->default(function (callable $get) {
                            return $get('../../start_time');
                        })->reactive(),
                    ]),
                ])->columns(1)->deletable(false)->addable(false)->minItems(0)->defaultItems(1)->label('')
            ]),
        ]),
    ]);
}

public static function form(Form $form): Form
{
    return $form->schema([
        Grid::make(3)->schema([
            TextInput::make('name')->required()->label('Name'),
            Select::make('contact_id')->required()->searchable()
                ->options(function () {
                    return User::role('ContactPerson')->pluck('name', 'id');
                }),
            DateTimePicker::make('start_time')->required()->prefixIcon('heroicon-m-clock')->format('Y-m-d H:i')->seconds(false),
            Textarea::make('description')->columnSpan(3)->nullable(),

            Section::make()->schema([
                Repeater::make('taskGroups')->relationship('taskGroups')->schema([
                    Grid::make(6)->schema([
                        Select::make('worker_id')->columnSpan(1)->relationship('worker', 'name'),
                        
                        DateTimePicker::make('start_time')
                        ->format('Y-m-d H:i')
                        ->default(function (callable $get) {
                            return $get('../../start_time');
                        })->reactive(),
                    ]),
                ])->columns(1)->deletable(false)->addable(false)->minItems(0)->defaultItems(1)->label('')
            ]),
        ]),
    ]);
}

What I am trying to achieve is to have the date and time set at the beginning to be copied into the "DateTimePicker" within the "Repeater" section. Despite various attempts, I haven't been able to get it to work. Any help or guidance would be greatly appreciated! Thank you in advance for your support.

2 Replies

David | Fortune Validator•4mo ago

I think you need ->live() on the first time picker. New myself but I think possibly that’s what’s missing.

Tommika79OP•4mo ago

Thank you for your suggestion. However, since the parent-child relationship is not straightforward in Filament, I solved it this way:

// This is where I need to read the given date.
DatePicker::make('start_date')->required()->label('Start Date'),

// Reading the start time here:
DateTimePicker::make('start_time')
    ->required()
    ->prefixIcon('heroicon-m-clock')
    ->format('Y-m-d H:i')
    ->seconds(false)
    ->label('Start Time')
    ->reactive()
    ->afterStateUpdated(function ($state, callable $set, $get) {
        self::updateTaskGroupsStartTime($state, $set, $get);
    }),

// And the function for it:
private static function updateTaskGroupsStartTime($state, callable $set, $get)
{
    $taskGroups = $get('taskGroups') ?? [];
    $updatedTaskGroups = collect($taskGroups)->map(function ($item) use ($state) {
        $item['start_time'] = $state;
        return $item;
    })->toArray();
    $set('taskGroups', $updatedTaskGroups);
}

// This is where I need to read the given date.
DatePicker::make('start_date')->required()->label('Start Date'),

// Reading the start time here:
DateTimePicker::make('start_time')
    ->required()
    ->prefixIcon('heroicon-m-clock')
    ->format('Y-m-d H:i')
    ->seconds(false)
    ->label('Start Time')
    ->reactive()
    ->afterStateUpdated(function ($state, callable $set, $get) {
        self::updateTaskGroupsStartTime($state, $set, $get);
    }),

// And the function for it:
private static function updateTaskGroupsStartTime($state, callable $set, $get)
{
    $taskGroups = $get('taskGroups') ?? [];
    $updatedTaskGroups = collect($taskGroups)->map(function ($item) use ($state) {
        $item['start_time'] = $state;
        return $item;
    })->toArray();
    $set('taskGroups', $updatedTaskGroups);
}

Thanks again for the advice!

Gaming

Programming

Help Needed with DateTimePicker in Repeater