如果用户的机器使用12小时时钟(上午/下午)或24时钟(军事时间),则使用javascript检测

时间:2014-12-25 14:09:51

标签: javascript date time webkit clock

是否可以检测用户的机器是使用12小时制(上午/下午)还是24小时制(军事时间)?

一种方法是检查用户区域设置,但是它只是大量的区域设置比较列表,而美国想要12小时时钟的人可以发送我的区域设置,而不是US_en,我无法知道她的偏好。与此同时,来自美国的某人可能会将她的机器设置为使用12小时时间格式而不需要12小时时钟。

编辑:

date.toLocaleTimeString();

正如用户Mouser在下面建议的那样理论上的工作理论,但不幸的是它在WebKit浏览器上bugged(在Chrome上测试和Windows上的新Opera)并且由于某种原因总是返回上午/下午时间。

示例:http://jsfiddle.net/sjuaL3p4/

所以我想如果有人知道如何在webkit浏览器上完成它,我必须重新解释我的问题。

7 个答案:

答案 0 :(得分:6)

此解决方案适用于大多数浏览器,但Chrome中存在错误。

    var date = new Date(Date.UTC(2012, 11, 12, 3, 0, 0));
    var dateString = date.toLocaleTimeString();

    //apparently toLocaleTimeString() has a bug in Chrome. toString() however returns 12/24 hour formats. If one of two contains AM/PM execute 12 hour coding.
    if (dateString.match(/am|pm/i) || date.toString().match(/am|pm/i) )
    {
        //12 hour clock
        console.log("12 hour");
    }
    else
    {
        //24 hour clock
        console.log("24 hour");
    }

解决方法Chrome;概念证明

对于Chrome来说,这是一个难看的解决方法。它通过country_code嗅出用户reverse geolocation。对于使用12小时系统的国家/地区的阵列检查该代码。此解决方案很难看,因为您需要用户权限才能获取地理位置数据,如果用户区域设置不同,则会提供错误的信息,但会为您提供用户所在的国家/地区。 我强烈反对使用此示例。这纯粹是出于灵感的目的。我把它作为概念证明。

	function getClockChrome() {

		navigator.geolocation.getCurrentPosition(function(pos) {
			var url = "http://nominatim.openstreetmap.org/reverse?format=json&lat="+pos.coords.latitude+"&lon="+pos.coords.longitude+"&addressdetails=1&accept-language=en_US&json_callback=chromeClockCallBack";
			var script = document.createElement('script');
			script.src = url;
			document.body.appendChild(script);
		},
		
		function()
		{
			//no access to location
		},
		

		{
		  enableHighAccuracy: true,
		  timeout: 5000,
		  maximumAge: 0
		}
		);

	}

	getClockChrome();

	var dateCountryCode = ['US', 'GB', 'PH', 'CA', 'AU', 'NZ', 'IN', 'EG', 'SA', 'CO', 'PK', 'MY'];
	function chromeClockCallBack(data)
	{
        //Request succeeded
		if (dateCountryCode.indexOf(data.address.country_code.toUpperCase()) > -1)
		{
			alert("12 hour clock");
		}
		else
		{
			alert("24 hour clock");
		}
	}

答案 1 :(得分:3)

toLocaleTimeString 以反映用户偏好的格式提供时间但不可靠。

我正在使用Debian系统。 locale的输出是:

LANG=en_US.utf8
LANGUAGE=
LC_CTYPE="en_US.utf8"
LC_NUMERIC="en_US.utf8"
LC_TIME="en_US.utf8"
LC_COLLATE="en_US.utf8"
LC_MONETARY="en_US.utf8"
LC_MESSAGES="en_US.utf8"
LC_PAPER="en_US.utf8"
LC_NAME="en_US.utf8"
LC_ADDRESS="en_US.utf8"
LC_TELEPHONE="en_US.utf8"
LC_MEASUREMENT="en_US.utf8"
LC_IDENTIFICATION="en_US.utf8"
LC_ALL=

以下是date的一些实验:

$ date +%X
05:23:32 PM
$ LANG=en_GB date +%X
17:24:06
$ LC_TIME=en_GB date +%X
17:24:22

%X格式告诉date根据区域设置输出时间。上述结果与预期完全一致。设置LC_TIME是一种仅更改时间格式但保持区域设置中的所有其他内容的方法。因此,即使en_US的默认值为12,美国有人也可以使用24小时时间格式。

我在我的系统上尝试了Mouser's script

$ firefox --no-remote
[Shows a time in the 12 hour format, as expected.]
$ LANG=en_GB firefox --no-remote
[Shows a time in the 24 hour format, as expected.]

到目前为止一切顺利。然而,

$ LC_TIME=en_GB firefox --no-remote
[Shows a time in the 12 hour format, this is wrong!]

我在Chrome上获得了相同的结果。似乎Firefox和Chrome都忽略了LC_TIME

答案 2 :(得分:2)

您可以将国际化API与resolvedOptions结合使用来确定hourCycle

const locale = navigator.language
Intl.DateTimeFormat(locale,  { hour: 'numeric' }).resolvedOptions().hourCycle // ?
Intl.DateTimeFormat('en-US', { hour: 'numeric' }).resolvedOptions().hourCycle // h12
Intl.DateTimeFormat('en-GB', { hour: 'numeric' }).resolvedOptions().hourCycle // h23

答案 3 :(得分:1)

除了永远不应该这一事实之外,.toLocaleTimeString()即使跨浏览器也可以使用,也不是一个好的解决方案。它返回一个遵循用户计算机设置的格式的时间字符串,但是可以有一个仍然显示AM / PM的24小时时钟,以及一个不显示AM / PM的12小时时钟。准确或可靠地检测到这一点是不可行的。

答案 4 :(得分:0)

这条简单的线似乎对我有用。

var is24 = ((new Date(2014, 01, 01, 15, 0, 0, 0)).toLocaleTimeString().indexOf("15") > -1);

虽然它仍然无法在Chrome中运行(适用于IE和Firefox)

答案 5 :(得分:0)

这适用于所有语言环境,包括具有非拉丁数字系统的语言环境。因为它是如此灵活,所以您需要知道是否以及如何处理这种情况。

这不支持IE 10或更早版本。

function is12Hour(locale) {
  return !!new Intl.DateTimeFormat(locale, { hour: 'numeric' }).format(0).match(/\s/);
}

console.log(is12Hour());
console.log(is12Hour('en-GB'));
console.log(is12Hour('ar-SA'));

答案 6 :(得分:0)

这在 Chrome 中对我有用。我使用了从 @Mouser 中选择的答案,但它在 Chrome 中不起作用。

    let result = false;
    const date = new Date();
    const dateString = date.toLocaleTimeString(language, {
        timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        timeStyle: 'short'
    });
    
    if (dateString.match(/am|pm/i) || date.toString().match(/am|pm/i)) {
        result = true;
    }
    else {
        result = false;
    }