TimePicker

Hi Everyone, how I can make TimePicker::make('time') works with 24 hours and not 12 hours system

16 Replies

You can set the PHP display format with ->displayFormat(). But the default should be H:i which is 24h

I try it still same

 TimePicker::make('time')
   ->label('Time')
   ->displayFormat('H:i')
   ->seconds(false)
   ->required(),

 TimePicker::make('time')
   ->label('Time')
   ->displayFormat('H:i')
   ->seconds(false)
   ->required(),

unicodes•2mo ago

@awcodes Hi, you have any idea about this? many thanks

Dennis Koch•2mo ago

Please read our #✅┊rules and don't tag people!

unicodes•2mo ago

sorry @Dennis Koch

Aizaysi•2mo ago

hi could you share the full code of that file?

awcodes•2mo ago

->native(false)

unicodes•2mo ago

with ->native(false) works but look like this, user can't write inside text field directly wich not a good UX.

TimePicker::make('time')
  ->label('Time')
  ->displayFormat('H:i')
  ->native(false)
  ->seconds(false)
  ->required(),

TimePicker::make('time')
  ->label('Time')
  ->displayFormat('H:i')
  ->native(false)
  ->seconds(false)
  ->required(),

awcodes•2mo ago

Yep. There’s caveats both ways. Native doesn’t allow disabling seconds or using a 24 hour format. That’s up to the browser at that point.

unicodes•2mo ago

so there is no way to make input field that accept only 00:00 format ?

awcodes•2mo ago

Not without a custom input. Could potentially do it with a TextInput and a mask. Would just need to make sure the state / casting is handled appropriately if your db field is time based.

unicodes•2mo ago

any example to do that with input and mask? and yes field in my DB is time

awcodes•2mo ago

Specifically that use case, no. It should be straightforward. https://filamentphp.com/docs/3.x/forms/fields/text-input#input-masking

Text input - Form Builder - Filament

awcodes•2mo ago

Might want to add some validation around it too so you don’t get things like 32:99 Or a negative time.

unicodes•2mo ago

thank you so much I will try that

Gaming

Programming

TimePicker