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

Question

我想确定浏览器如何显示时间输入：

<input type="time">

显示为 24 小时制还是 12 小时制（添加了“AM/PM”选项）？

显示会影响设计，因为两个版本的宽度不同。我想保持多个输入的宽度尽可能紧凑。

我仔细看了其他文章，但是很多都比较老了，信息已经过时了，运行代码摘录时，结果并不一致。

此 JavaScript 仅采用语言环境（此处为：en_GB）并按如下方式应用它：

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

附加说明：我在英国，我在 Windows 10 上使用 24 小时格式。浏览器反映了 24 小时系统偏好； JavaScript 时间字符串没有。当我更改为 12 小时格式（并重新启动）时，更改仅由 Chrome 应用。 JavaScript 示例中的值保持不变。我读过this article about GB locales，但它只是显示了不一致之处。

基本上，我只想知道浏览器显示的是哪一个。就是这样。

如果无法做到这一点，则强制输入以 24 小时格式显示是一种替代方法。

Answer 1

我终于明白你的实际问题了

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

在 Chrome/Opera 中，时间控制很简单，可以根据操作系统区域设置以 12 或 24 小时格式输入小时和分钟，并使用向上和向下箭头来增加和减少当前选定的组件。在某些版本中，提供了一个“X”按钮来清除控件的值。

---

Firefox 的时间控制与 Chrome 的非常相似，只是它没有向上和向下箭头。它还根据系统区域设置使用 12 小时或 24 小时格式输入时间。提供了一个“X”按钮来清除控件的值。

---

[假设边缘在 Chromium 之前]

Edge 时间控制更加精细，通过滑动卷轴打开小时和分钟选择器。它与 Chrome 一样，根据系统区域设置使用 12 或 24 小时格式输入时间：

所以也许这会回答你的问题？

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)
    }      
}*/

旧答案：

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

这是我通过结合@mplungjan 的第一个解决方案和@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

可能对您的问题有用，我认为它可以回答相同的问题。

如果您需要将时间格式中包含的 PM 字符串转换为 24 小时制，例如“06:45:05PM”，您可以使用此代码。

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')