时间戳

首页 > 解决方案 > 用于确定浏览器是否使用 12 小时或 24 小时格式显示时间输入的 JavaScript

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

问题描述

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

<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 示例中的值保持不变。我读过这篇关于 GB locales的文章，但它只是显示了不一致之处。

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

如果这是不可能的，则强制输入使用 24 小时格式显示将是一种替代方法。

标签： javascriptinputtimelocale

解决方案

这是我通过结合@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>

推荐阅读