How to adjust the time format of the element (12-hour or 24-hour)?
P粉4884647312023-08-20 18:47:36
0
2
597
I'm using an HTML5 input element with type=time. The problem is that it displays the time in 12 hour format, but I want it to display in 24 hour format. How do I set it to 24 hour time?
According to the HTML5 draft,input type=timecreates a control for entering the time of day, which is expected to be implemented using the "user's preferred display method". But in practice, this means using a widget that follows the browser's localization rules. Therefore, regardless of the language of the surrounding content, the display will change based on the language of the browser, the language of the underlying operating system, or the system-wide locale (depending on the browser). For example, using the Finnish version of Chrome, the widgets I see use the standard 24-hour clock. Your situation may vary.
Therefore,input type=timeis based on an approach that leaves the idea of localization entirely outside of the page author. This is intentional; this question has been raised a few times in HTML5 discussions, with no change (except perhaps a clarification of the text describing this behavior as expected).
Please note thatinput type=timedoes not allow thepatternandplaceholderattributes. Also, it can be misleading ifplaceholder="hrs:mins"is implemented. When the browser's locale uses "." as the time separator, the user may need to enter 12.30 (using a period) instead of 12:30.
My conclusion is that on browsers that don't support thepatternattribute, one should useinput type=textand use some JavaScript to check the correctness of the input.
This 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 operating system locale. The value returned is in 24-hourhour:minuteformat and looks similar to14:30.
More details, including how it looks in each browser, can be found onMDN.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
According to the HTML5 draft,
input type=timecreates a control for entering the time of day, which is expected to be implemented using the "user's preferred display method". But in practice, this means using a widget that follows the browser's localization rules. Therefore, regardless of the language of the surrounding content, the display will change based on the language of the browser, the language of the underlying operating system, or the system-wide locale (depending on the browser). For example, using the Finnish version of Chrome, the widgets I see use the standard 24-hour clock. Your situation may vary.Therefore,
input type=timeis based on an approach that leaves the idea of localization entirely outside of the page author. This is intentional; this question has been raised a few times in HTML5 discussions, with no change (except perhaps a clarification of the text describing this behavior as expected).Please note that
input type=timedoes not allow thepatternandplaceholderattributes. Also, it can be misleading ifplaceholder="hrs:mins"is implemented. When the browser's locale uses "." as the time separator, the user may need to enter 12.30 (using a period) instead of 12:30.My conclusion is that on browsers that don't support the
patternattribute, one should useinput type=textand use some JavaScript to check the correctness of the input.HTML5 time input
This 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 operating system locale. The value returned is in 24-hour
hour:minuteformat and looks similar to14:30.More details, including how it looks in each browser, can be found onMDN.