Javascript -- 检测用户的语言环境是否设置为使用 12 小时或 24 小时时间格式

Question

一种方法是解析new Date().toLocaleString()。 但这在 chromium/webkit 中不起作用，因为它返回的字符串不依赖于用户的语言环境（请参阅 http://code.google.com/p/chromium/issues/detail?id=3607 的错误报告）

我强调我正在寻找一种仅适用于客户端且适用于 chromium 的解决方案。

Answer 1

自从上次回答这个问题以来已经有几年了，并且已经引入了一些技术来解决这个问题。其中一种技术是Intl.DateTimeFormat，它提供了有关各种语言环境的日期格式的大量信息。

console.log(new Intl.DateTimeFormat().resolvedOptions());
console.log(new Intl.DateTimeFormat().resolvedOptions().hour12);

.as-console-wrapper { max-height: 100% !important; }

但是，大多数语言环境都没有为 hour12 选项定义默认值。所以，如果返回 undefined，我会查看 formatToParts 函数。

const hourParts = new Intl.DateTimeFormat(undefined, { hour: 'numeric' }).formatToParts(new Date(2020, 0, 1, 13));
console.log(hourParts);

.as-console-wrapper { max-height: 100% !important; }

输出应该是这样的（对于您浏览器的当前语言；在我的例子中，“en-US”）：

[
  {
    "type": "hour",
    "value": "1"
  },
  {
    "type": "literal",
    "value": " "
  },
  {
    "type": "dayPeriod",
    "value": "PM"
  }
]

获取具有type 的部分的value 的长度等于"hour" 将告诉您它是用十二小时还是二十四小时时间格式化的。

例如，我碰巧知道在日本，他们使用 24 小时制，所以我可以检查一下：

const hourParts = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric'
}).formatToParts(new Date(2020, 0, 1, 13));
console.log(hourParts.find(part => part.type === 'hour').value.length);

.as-console-wrapper { max-height: 100% !important; }

而且我知道美国默认为十二小时时间：

const hourParts = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
}).formatToParts(new Date(2020, 0, 1, 13));
console.log(hourParts.find(part => part.type === 'hour').value.length);

.as-console-wrapper { max-height: 100% !important; }

将它包装在一个函数中很容易：

function localeUses24HourTime(langCode) {
  return new Intl.DateTimeFormat(langCode, {
    hour: 'numeric'
  }).formatToParts(new Date(2020, 0, 1, 13)).find(part => part.type === 'hour').value.length === 2;
}

console.log(localeUses24HourTime()); // undefined means current user's language
console.log(localeUses24HourTime('en-US')); // a specific language known to be false
console.log(localeUses24HourTime('ja-JP')); // a specific language known to be true

.as-console-wrapper { max-height: 100% !important; }

您可能会发现这比解析 toLocaleString() 的输出更复杂或更简单。

注意：我在回答的中途从使用术语“区域设置”切换到“语言”。这是由于规范的编写方式和信息的指定方式。 en-US 和 ja-JP 是 BCP 语言代码，传递给 Intl.DateTimeFormat 的构造函数以查找日期和时间格式规则。规范使用术语locale 来指代这条信息，但它确实是一个语言标识符，虽然它可能包含一个区域（在提到的代码中的US 和JP），但不需要它们，该地区也不一定表示用户的区域设置（考虑一个说西班牙语并在西班牙学习的人[因此会使用语言代码'es-ES']，但居住在美国，日期格式不同比西班牙）。

Answer 2

只要 Chromium 不修复 toLocaleString()，就无法在 Chromium 中修复。

对于 Firefox 和 IE，解析 toLocaleString() 将提供该信息。

编辑
显然 toLocalString() 现在已在 Chrome 中修复。因此解析toLocaleString()是一种解决方案。

Answer 3

您永远不应该以这种方式搜索本地模式。 toLocaleString() 显然是一个错误（源自 Java），不应使用。正如您所提到的，这种方法在各种浏览器中都没有得到很好的支持（Chrome 只是其中之一）。
事实上，唯一能够正确（但不是 100% 正确）的网络浏览器（来自流行的浏览器）是 IE。

要根据区域设置正确格式化日期，请使用Globalize。它包含从 .Net 中转储的本地化模式。
您可能还想使用Dojo，它也允许区域设置感知格式，但基于CLDR。

编辑，新的事实存在

JavaScript 中有一个新的 I18n 标准 - ECMA-402。这个标准实际上允许使用 JS Date 的对象。但是，应该始终传递一个语言标签：

var date = new Date();
var formatted = date.toLocaleString('de-DE');

唯一的问题是，我知道当前实现 ECMA-402 的唯一网络浏览器是 Google Chrome。

目前看来，仍然可以使用类似于iLib 的东西。

Answer 4

为除 Chrome 之外的所有浏览器解析 (new Date).toLocaleString()，并根据 Chrome 的区域设置地图及其时间格式检查 navigator.language。

Answer 5

我知道这是最不受欢迎的方式，但你能不能不检查一下时间？

如果时间在12点之前，设置时间为下午1点，测试输出是13还是1。

我知道这只是一个想法，但如果放入一个不错的 Date.prototype.is24hour() 中，则返回 true；它可以很好地工作吗？

我在日期中使用http://www.datejs.com/。倾向于做我需要的一切！因此，您可以将它与自定义原型函数一起使用，这将为您提供所需的一切！