I am using HTML5 input element with type=time
. The problem is it shows time with 12 hours
but I want it to show it in 24 hours
a day. How can I make it to 24 hours?
Here is my input field:
<input type="time" name="time" placeholder="hrs:mins" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required>
input type="time" The value of the time input type is commonly in 24-hour format ("hh:mm"). If the time includes seconds the format is always "hh:mm:ss". If you want the users to mention also seconds, you can do it with the help of the step attribute.
Tap Set. Tap Use 24- Hour Format to change the format to 24-hour time. Note that the time on the Notification bar reflects the change. You can return to 12-hour time by tapping Use 24-Hour Format again.
This one is the simplest of the date/time related types, allowing the user to select a time on a 24/12 hour clock, usually depending on the user's OS locale configuration. The value returned is in 24h hours:minutes
format, which will look something like 14:30
.
More details, including the appearance for each browser, can be found on MDN.
<input type="time" name="time">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With