Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the time format (12/24 hours) of an <input>?

Tags:

html

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>
like image 515
Om3ga Avatar asked Nov 23 '12 04:11

Om3ga


People also ask

How do you do 24-hour time input?

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.

How do I change my clock from 24 to 12 hour?

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.


1 Answers

HTML5 Time Input

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">
like image 76
Praveen Kumar Purushothaman Avatar answered Nov 06 '22 20:11

Praveen Kumar Purushothaman