Feb 18, 2026
0
Level 1
Datepicker in filament table
I am building a table in which I can add/edit/delete the records. I am facing issue when date field is showing datepicker(simple html5) is not working. ***filament automatically adding disabled thing due to which datepicker is not working, help me to make the following code to work -
filename - UserResource.php
<?php
namespace App\Filament\Resources\Users;
use App\Filament\Resources\Users\Pages\ManageUsers;
use App\Models\User;
use BackedEnum;
use Illuminate\Support\Str;
use Filament\Actions\BulkActionGroup;
use Filament\Actions\DeleteAction;
use Filament\Actions\DeleteBulkAction;
use Filament\Actions\EditAction;
use Filament\Forms\Components\DateTimePicker;
use Filament\Forms\Components\TextInput;
use Filament\Tables;
use Filament\Actions\Action;
use Filament\Resources\Resource;
use Filament\Schemas\Schema;
use Filament\Support\Icons\Heroicon;
use Filament\Tables\Columns\TextColumn;
use Filament\Tables\Table;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\DatePicker;
use Filament\Forms\Components\Checkbox;
use Filament\Forms\Components\Radio;
use Filament\Tables\Columns\TextInputColumn;
use Filament\Tables\Columns\SelectColumn;
use Filament\Tables\Columns\CheckboxColumn;
use Carbon\Carbon;
class UserResource extends Resource
{
protected static ?string $model = User::class;
protected static string|BackedEnum|null $navigationIcon = Heroicon::OutlinedRectangleStack;
protected static ?string $recordTitleAttribute = 'User';
public static function form(Schema $schema): Schema
{
return $schema
->components([
TextInput::make('name')
->required(),
TextInput::make('email')
->label('Email address')
->email()
->required(),
TextInput::make('password')
->password()
->required(),
Select::make('role')
->options([
'admin' => 'Admin',
'user' => 'User',
'manager' => 'Manager',
])
->required(),
DatePicker::make('dob')
->label('Date of Birth'),
Checkbox::make('is_active')
->default(true),
Radio::make('gender')
->options([
'male' => 'Male',
'female' => 'Female',
])
->inline(),
DateTimePicker::make('created_at')
->label('Created At')
->required()
->seconds(false),
]);
}
public static function table(Table $table): Table
{
return $table
->columns([
TextInputColumn::make('name')
->searchable()
->disabled(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
)
->extraAttributes(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
? ['class' => 'border-0 bg-transparent shadow-none ring-0 pointer-events-none px-0']
: []
)
->updateStateUsing(fn ($record, $state) =>
$record->update(['name' => $state])
),
TextInputColumn::make('email')
->searchable()
->disabled(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
)
->extraAttributes(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
? ['class' => 'border-0 bg-transparent shadow-none ring-0 pointer-events-none px-0']
: []
)
->updateStateUsing(fn ($record, $state) =>
$record->update(['email' => $state])
),
SelectColumn::make('role')
->options([
'admin' => 'Admin',
'user' => 'User',
'manager' => 'Manager',
])
->disabled(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
)
->extraAttributes(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
? ['class' => 'border-0 bg-transparent shadow-none ring-0 pointer-events-none px-0']
: []
)
->updateStateUsing(fn ($record, $state) =>
$record->update(['role' => $state])
),
CheckboxColumn::make('is_active')
->disabled(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
)
->extraAttributes(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
? ['class' => 'pointer-events-none opacity-100']
: []
)
->updateStateUsing(fn ($record, $state) =>
$record->update(['is_active' => $state])
),
TextInputColumn::make('dob')
->label('Date of Birth')
->type('date')
->state(fn ($record) =>
$record->dob
? \Carbon\Carbon::parse($record->dob)->format('Y-m-d')
: null
)
//->disabled(fn ($record, $livewire) =>
// $livewire->editingId !== $record->id
//)
->extraAttributes(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
? [
'x-bind:readonly' => 'isLoading',
'class' => 'border-0 bg-transparent shadow-none ring-0 pointer-events-none px-0'
]
: []
)
->updateStateUsing(fn ($record, $state) =>
$record->update(['dob' => $state])
),
TextInputColumn::make('created_at')
->label('Created At')
->type('date')
->state(fn ($record) =>
$record->created_at
? $record->created_at->format('Y-m-d')
: null
)
//->disabled(fn ($record, $livewire) =>
// $livewire->editingId !== $record->id
//)
->extraAttributes(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
? [
'x-bind:readonly' => 'isLoading',
'class' => 'border-0 bg-transparent shadow-none ring-0 pointer-events-none px-0',
'step' => 60,
]
: ['step' => 60]
)
->updateStateUsing(function ($record, $state) {
if ($state) {
$record->created_at = \Carbon\Carbon::createFromFormat('Y-m-d', $state);
$record->save();
}
}),
])
->headerActions([
Action::make('add_user')
->label('Add User')
->action(function ($livewire) {
$user = \App\Models\User::create([
'name' => '',
'email' => '',
'role' => 'user',
'is_active' => true,
'password' => bcrypt('password'),
]);
$livewire->editingId = $user->id;
}),
])
->recordActions([
Action::make('edit')
->visible(fn ($record, $livewire) =>
$livewire->editingId !== $record->id
)
->action(fn ($record, $livewire) =>
$livewire->editingId = $record->id
),
Action::make('save')
->color('success')
->visible(fn ($record, $livewire) =>
$livewire->editingId === $record->id
)
->action(fn ($livewire) =>
$livewire->editingId = null
),
DeleteAction::make(),
]);
}
public static function getPages(): array
{
return [
'index' => ManageUsers::route('/'),
];
}
}
I also tried to use custom css and js to make it work on event listener but disabled thing making issue.
Please or to participate in this conversation.