make date range filter inline

I want to make the date range to be in the same row
right now it looks like the Test To field is below the Test From

here is my filter

 ->filters([
                Filter::make('test_date_range')
                    ->label('Test Date')
                    ->form([
                        DatePicker::make('start_date')
                            ->label('Test From')
                            ->default(now()->subDays(6)),
                        DatePicker::make('end_date')
                            ->label('Test To')
                            ->default(now()),
                    ])                    
                    ->query(function ($query, array $data) {
                        return $query
                            ->when(
                                $data['start_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '>=', $date)
                            )
                            ->when(
                                $data['end_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '<=', $date)
                            );
                    })

 ->filters([
                Filter::make('test_date_range')
                    ->label('Test Date')
                    ->form([
                        DatePicker::make('start_date')
                            ->label('Test From')
                            ->default(now()->subDays(6)),
                        DatePicker::make('end_date')
                            ->label('Test To')
                            ->default(now()),
                    ])                    
                    ->query(function ($query, array $data) {
                        return $query
                            ->when(
                                $data['start_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '>=', $date)
                            )
                            ->when(
                                $data['end_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '<=', $date)
                            );
                    })

Solution

@roy21 if these are the only fields, you can just add

->columns()

->columns()

to the Filter

Filter::make('test_date_range')
  ->columns()
  ...

Filter::make('test_date_range')
  ->columns()
  ...

If you have other fields, you can use all the Layouts available to forms to change the filter layout.

Have a look here too
https://filamentphp.com/docs/3.x/tables/filters/layout#customizing-the-filter-form-schema

Filter layout - Table Builder - Filament

Jump to solution

make date range filter inline

I want to make the date range to be in the same row
right now it looks like the Test To field is below the Test From

here is my filter

 ->filters([
                Filter::make('test_date_range')
                    ->label('Test Date')
                    ->form([
                        DatePicker::make('start_date')
                            ->label('Test From')
                            ->default(now()->subDays(6)),
                        DatePicker::make('end_date')
                            ->label('Test To')
                            ->default(now()),
                    ])                    
                    ->query(function ($query, array $data) {
                        return $query
                            ->when(
                                $data['start_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '>=', $date)
                            )
                            ->when(
                                $data['end_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '<=', $date)
                            );
                    })

 ->filters([
                Filter::make('test_date_range')
                    ->label('Test Date')
                    ->form([
                        DatePicker::make('start_date')
                            ->label('Test From')
                            ->default(now()->subDays(6)),
                        DatePicker::make('end_date')
                            ->label('Test To')
                            ->default(now()),
                    ])                    
                    ->query(function ($query, array $data) {
                        return $query
                            ->when(
                                $data['start_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '>=', $date)
                            )
                            ->when(
                                $data['end_date'] ?? null,
                                fn ($query, $date) => $query->whereDate('test_date', '<=', $date)
                            );
                    })

Solution

@roy21 if these are the only fields, you can just add

->columns()

->columns()

to the Filter

Filter::make('test_date_range')
  ->columns()
  ...

Filter::make('test_date_range')
  ->columns()
  ...

Filter layout - Table Builder - Filament

Jump to solution

make date range filter inline

make date range filter inline

Similar Threads

Similar Threads

Similar Threads