React-datepicker: Timepicker 24-hour format in dropdown

[ninjami-matti]

Using timeFormat="HH:mm" changes the input field to the chosen format,

but in the dropdown the times are still in AM/PM format. I have gone through the docs multiple times but I do not see any other props to change the format than "timeFormat".

Example down below:
Input field is in 24 hour format,
Dropdown is in 12 hour format

Code snippet:
<DatePicker showTimeSelect showTimeSelectOnly dateFormat="HH:mm" timeIntervals={30} onChange={ e => handleDateChange(e) } />

[ymor]

Your example shows that you used dateFormat, which formats the input. You need to set the timeFormat to "HH:mm" too and this will format the dropdown.

[ninjami-matti]

I can't believe that I missed that typo there! I have gone through the code so many times and somehow every time failed to see that I was using dateFormat prop.

Thank you!

[nielsuit227]

Your example shows that you used dateFormat, which formats the input. You need to set the timeFormat to "HH:mm" too and this will format the dropdown.

Thanks alot! I couldn't seem to find a list with possible formats, where did you gather your information?

[ymor]

Your example shows that you used dateFormat, which formats the input. You need to set the timeFormat to "HH:mm" too and this will format the dropdown.

Thanks alot! I couldn't seem to find a list with possible formats, where did you gather your information?

Back when I answered this question the library was using moment.js, but now its using date-fns so you can find the formats here: https://date-fns.org/v1.28.5/docs/format