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

unicodesOP•4mo ago

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(),

unicodesOP•4mo ago

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

Dennis Koch•4mo ago

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

unicodesOP•4mo ago

sorry @Dennis Koch

Aizaysi•4mo ago

hi could you share the full code of that file?

awcodes•4mo ago

->native(false)

unicodesOP•4mo 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•4mo 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.

unicodesOP•4mo ago

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

awcodes•4mo 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.

unicodesOP•4mo ago

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

awcodes•4mo 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•4mo ago

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

unicodesOP•4mo ago

thank you so much I will try that

awcodes•4mo ago

Might even make a good plugin if you get it all working. 🙂

Gaming

Programming

TimePicker