How to enter value in 12 hour format?

[rhap5ody]

Hi. I want to enter value in 12 hour format but the app crashes saying i didn't provide a valid value for the value prop. How do I do that? Here is an example i try to use:

<TimePicker
  value='06:00 PM'
  clockIcon={null}
  disableClock
  format='hh:mm a'
/>

Thanks.

[emilyuhde]

The time passed into the value prop needs to be in 24 hour format and the TimePicker will handle converting the way it's displayed if your locale or format specifies it should be a 12 hour format time. So you should set value='18:00'.

[emilyuhde]

Also, I also disabled the clock in my usage and I only had to set disableClock. clockIcon was automatically taken care of so I didn't need to set it to null.

[rhap5ody]

@emilyuhde I get the value from api in 12 hour format so I want to use it directly as such. Isn't there an option to enter it in 12 hour format and also display it in it? Thanks

[emilyuhde]

You could convert the time you get from the API into a Date object before passing it into the value prop, but from what I've seen, it's still going to return to you a string in 24 hour format from the onChange.

[jpcmf]

Is possible use as 24 hour format? I mean, just enter 22:00?

[wojtekmaj]

Yes, of course. By default, time picker format is based on detected user browser's locale, unless locale prop is provided (e.g. 'de-DE' will give you 24-hour clock, and 'en-US' - 12-hour clock). And this behavior can also be overwritten using format prop.