Need help with DateTimePicker

I have this code in one of my resource inside employee panel:

<?php            
Forms\Components\DateTimePicker::make('check_in')
                ->label('Check-In')
                ->seconds(false)
                ->weekStartsOnMonday()
                ->required(),
?>

<?php            
Forms\Components\DateTimePicker::make('check_in')
                ->label('Check-In')
                ->seconds(false)
                ->weekStartsOnMonday()
                ->required(),
?>

It does not allow me to select time and also show's different UI compared to the one I have for admin panel. In admin panel the same code works perfectly. I have already done these steps: 1️⃣ Run php artisan filament:upgrade. 2️⃣ Recompile any frontend assets you may have. 3️⃣ Clear your browser cache. 4️⃣ Delete the /resources/views/vendor directory if it exists. I need help please. Tried everything but nothing worked.

13 Replies

LeandroFerreira•2d ago

You mean, you are using this outside the panel?

farhanaliOP•2d ago

Thanks, @LeandroFerreira for getting back. No, it's inside the employee panel. I have 2 panels admin and employee. Admin panel works great but I face the above datetimepicker issue throughout the employee panel. Looks like maybe I am missing some required css or js file. I created panel through command php artisan make:filament-panel employee.

LeandroFerreira•2d ago

Should work. Console errors?

farhanaliOP•2d ago

Nope, no errors anywhere. if set ->native(false), it works then but native one does not work. Should I share my EmployeePanelProvider code with you here if you don't mind? Maybe I missed something that is important.

LeandroFerreira•2d ago

Weird.. are you using a custom theme?

farhanaliOP•2d ago

Nah, just using default filament for admins and employes.

LeandroFerreira•2d ago

Could you share a screenshot with native() ?

farhanaliOP•2d ago

This is what I see with ->native(false).

omar abdou•2d ago

Same to me , when ->native(false) it displays a different component

LeandroFerreira•2d ago

I mean, what about DateTimePicker::make('checkin')->native() ?

LeandroFerreira•2d ago

native(false) should show this https://filamentphp.com/docs/3.x/forms/fields/date-time-picker#enabling-the-javascript-date-picker

Date-time picker - Form Builder - Filament

farhanaliOP•2d ago

@LeandroFerreira

DateTimePicker::make('checkin')->native()

DateTimePicker::make('checkin')->native()

still displays same layout as my first screenshot in the question. No difference. Anyways, I can use the

->native(false)

->native(false)

is there any way to make 12 hour format and allow users to select time using 12 hour format? I tried

->displayFormat('M j, Y - h:i A')

->displayFormat('M j, Y - h:i A')

and when selected date and time it displays correct format but I am talking about the box which opens when clicked on datetimepicker field it displays time in 24 hour format.

Matthew•2d ago

Is this a brand new project, or are you laying filament over the top of something that already exists. If the former, I've got no idea on your issue. If the latter, I'm guessing you've got some CSS\JS\middleware somewhere intefering.

Gaming

Programming

Need help with DateTimePicker

Did you find this page helpful?