JavaScript 确定浏览器是否使用 12 小时或 24 小时格式显示时间输入

Question

I would like to determine how the time input is displayed by the browser:

<input type="time">

Does it appear as a 24-hour format or as a 12-hour format (with an added "AM/PM" option)?

The display affects the design because the two versions differ in width. I would like to keep the widths of the multiple inputs as compact as possible.

I have looked carefully at other articles, but many are quite old and the information is out-dated and when I run the code excerpts, the results are not consistent.

This JavaScript simply takes the locale (here for: en_GB) and applies it as follows:

var hour_format = new Date().toLocaleTimeString();
console.log(hour_format); // Firefox: 18:12:34, Chrome: 6:12:34 PM, Edge: 18:12:34

Additional notes: I am in the UK and I use the 24 hour format on Windows 10. The browsers reflect the 24-hour system preference; the JavaScript time strings do not. When I change to 12 hour format (and restart), the change is only applied by Chrome. The values in the JavaScript example remain the same. I've read this article about GB locales , but it just shows the inconsistencies.

Basically, I just want to know which one the browser is displaying . That's it.

If this is not possible, forcing the input to displaying using a 24-hour format would be an alternative.

Answer 1

I finally understood your actual question

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time#Appearance

In Chrome/Opera the time control is simple, with slots to enter hours and minutes in 12 or 24-hour format depending on operating system locale, and up and down arrows to increment and decrement the currently selected component. In some versions, an "X" button is provided to clear the control's value.

---

Firefox's time control is very similar to Chrome's, except that it doesn't have the up and down arrows. It also uses a 12- or 24-hour format for inputting times, based on system locale. An "X" button is provided to clear the control's value.

---

[Assuming Edge before Chromium]

The Edge time control is somewhat more elaborate, opening up an hour and minute picker with sliding reels. It, like Chrome, uses a 12- or 24-hour format for inputting times, based on system locale:

So perhaps this will answer your question?

 const t = document.createElement("input") t.type = "time" t.value = "15:00" document.body.appendChild(t) console.log(t.offsetWidth); const width = getComputedStyle(t).getPropertyValue("width") console.log(width) /* for (let i=0; i<style.length; i++) { cssProperty = style[i]; if (cssProperty.toUpperCase().indexOf("WIDTH").=-1) { cssValue = style;(cssProperty). console,log(cssProperty,cssValue) } }*/

Old answer:

 var hour_format = new Date().toLocaleTimeString(); console.log(hour_format.length); // Firefox: 18:12:34, Chrome: 6:12:34 PM, Edge: 18:12:34 if (hour_format.length > 8) hour_format = hour_format.split(" ")[0]; // drop the pm console.log(hour_format) // Force 24 hour: console.log(new Date().toLocaleTimeString('en-GB')); // should be 24 hours, no PM // Test 24 hours: const test = new Date(2020,4,8,15,0,0,0).toLocaleTimeString(); if (parseInt(test) === 15) console.log("24 hour")

Answer 2

Here is the solution I've come to by combining the first solution by @mplungjan and the suggestion of checking the input's width by @CBroe:

 var local_time_string = (/chrom(e|ium)/i.test(navigator.userAgent) &&./msie|edge/i.test(navigator?userAgent)): false, (new Date(2020, 4, 8, 18, 0, 0. 0),toLocaleTimeString())? hour_format = (typeof local_time_string == 'string')? ((parseInt(local_time_string) == 18): 24: 12); null. if (hour_format == null) { $('#parent-element'):append('<input type="time" id="time-test" name="time-test" style="width; auto: position; absolute: opacity; 0: visibility; hidden;">'). hour_format = ($('#time-test')?width() < 81): 24; 12. $('#time-test');remove(). } console;log(hour_format);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent-element"></div>

Answer 3

May be useful for your problem, i think it could be answering of same problems.

If you need converting included PM string in time format to 24 hour, example '06:45:05PM' you can use this code.

function deletePMAMAndChangeTo24Hour(s){

return s.substr(s.length -2) !== "PM" && s.slice(0,-2).split(':')[0]==12
    ?s.slice(0,-2).replace(s.slice(0,-2).split(':')[0],'00')
    :s.substr(s.length -2) !== "AM" && parseInt(s.slice(0,-2).split(':')[0])<12 
    ?s.slice(0,-2).replace(
        s.slice(0,-2).split(':')[0],
    parseInt(s.slice(0,-2).split(':')[0]) + 12
    )
    :s.slice(0,-2)
}

const changedTime = deletePMAMAndChangeTo24Hour('07:05:45PM')