使用 javascript 檢測用戶的區域設置是否設置為 12 小時或 24 小時時間格式

Question

如何使用 Javascript 檢查用戶是否使用 12 小時或 24 小時時間格式，有或沒有使用像 moment.js 這樣的第三方庫我也嘗試new Date().toLocaleString()但它沒有在 firefox 和谷歌瀏覽器中測試。 firefox 始終顯示 12 小時制，而 chrome 始終顯示 24 小時制

Answer 1

像這樣的東西：

/*
 * Detects browser's locale 24h time preference
 * It works by checking whether hour output contains a space ('1 AM' or '01')
 */
const isBrowserLocale24h = () =>
  !new Intl.DateTimeFormat(undefined, { hour: 'numeric' }).format(0).match(/\s/);

檢查Intl.DateTimeFormat 的瀏覽器兼容性。

您也許可以回退到以下內容，但我不確定AM/PM指定（無論使用哪個字符）是否位於所有語言環境的輸出末尾。 這只是檢查最后一個字符是否是數字：

Number.isFinite(Number((new Date()).toLocaleString().slice(-1)))

Answer 2

Mario Bonaci 的回答並沒有像我預期的那樣奏效，盡管它為我指明了正確的方向。 這是我最初嘗試的：

/*
 * Detects navigator locale 24h time preference
 * It works by checking whether hour output contains AM ('1 AM' or '01 h')
 */
const isBrowserLocale24h = () =>
  !new Intl.DateTimeFormat(undefined, { hour: "numeric" })
    .format(0)
    .match(/AM/);

它沒有按預期工作，因為它顯然采用瀏覽器的安裝語言而不是用戶首選語言。 將undefined更改為navigator.language 。 在這里，我們根據用戶的首選語言檢查時間格式：

/*
 * Detects navigator locale 24h time preference
 * It works by checking whether hour output contains AM ('1 AM' or '01 h')
 * based on the user's preferred language
 */
const isBrowserLocale24h = () =>
  !new Intl.DateTimeFormat(navigator.language, { hour: "numeric" })
    .format(0)
    .match(/AM/);

Answer 3

@Marko Bonaci 的回答很有幫助。 我研究了他的評論“我不確定 AM/PM 指定（無論使用哪個字符）是否在所有語言環境的輸出末尾。” 谷歌搜索列出了這個鏈接，說明了用戶的評論：

拉丁語縮寫 am 和 pm（通常寫作“am”和“pm”、“AM”和“PM”或“AM”和“PM”）用於英語、葡萄牙語（巴西）和西班牙語。 希臘語中的等價物是 π.µ。 和µ.µ。 分別。

這可以從瀏覽器的控制台使用兩個字母的ISO 639-1代碼“el”或三個字母的 ISO 639-2 代碼“ell”來驗證：

new Intl.DateTimeFormat(["el"], { hour: "numeric" }).format();
// or
new Intl.DateTimeFormat("ell", { hour: "numeric" }).format();

這些行將返回一個帶有本地化“AM”/“PM”字符串的值：

'7 π.μ.'
'7 μ.μ.'

我最終采納了他的建議，使用了 JavaScript 中的內置“ Number ”對象。

// UK english
Number.isInteger(Number(new Intl.DateTimeFormat("en-UK", { hour: "numeric" }).format()));
// Returns 'true'

// Greek
Number.isInteger(Number(new Intl.DateTimeFormat("el", { hour: "numeric" }).format()));
// Returns 'false'

// U.S.
Number.isInteger(Number(new Intl.DateTimeFormat("en-US", { hour: "numeric" }).format()));
// Returns 'false'

這是我冗長的功能：

const isBrowserLocaleClockType24h = (languages) => {
    // "In basic use without specifying a locale, DateTimeFormat
    // uses the default locale and default options."
    // Ref: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_datetimeformat
    // To be sure of the browser's language (set by the user
    // and may be different than the operating system's default language)
    // set the 'languages' parameter to 'navigator.language'.
    // E.g. isBrowserLocaleClockType24h(navigator.language);
    if (!languages) { languages = []; }

    // The value of 'hr' will be in the format '0', '1', ... up to '24'
    // for a 24-hour clock type (depending on a clock type of
    // 'h23' or 'h24'. See:
    // developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale
    // Intl.Locale.prototype.hourCycles
    // Returns an Array of hour cycle identifiers, indicating either
    // the 12-hour format ("h11", "h12") or
    // the 24-hour format ("h23", "h24").

    // A 12-hour clock type value has the format '7 AM', '10 PM', or
    // '7 π.μ.' (if the locale language is Greek as specified
    // by the two letter ISO 639-1 code "el" or 
    // three letter ISO 639-2 code "ell").

    const hr = new Intl.DateTimeFormat(languages, { hour: "numeric" }).format();

    // If there's no space in the value of the 'hr' variable then
    // the value is a string representing a number between and
    // can include '0' and '24'. See comment above regarding "hourCycles".
    // Return 'true' if a space exists.
    //if (!hr.match(/\s/)) { return true; }
    // Or simply:
    // return !hr.match(/\s/);

    // Alternatively, check if the value of 'hr' is an integer.
    // E.g. Number.isInteger(Number('10 AM')) returns 'false'
    // E.g. Number.isInteger(Number('7 π.μ.')) returns 'false'
    // E.g. Number.isInteger(Number('10')) returns 'true'
    return Number.isInteger(Number(hr));
};

用法：

const isBrowserLocaleClock24h = isBrowserLocaleClockType24h();
// or
const isBrowserLocaleClock24h = isBrowserLocaleClockType24h(navigator.language);

使用 Intl.Locale().hourCycles

最后，對於更新的瀏覽器（2022 年 12 月的 Firefox 除外）， MDN上列出了新的 Intl.Locale(navigator.language).hourCycles。

// developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some#checking_whether_a_value_exists_in_an_array
const hourCycles = new Intl.Locale(navigator.language).hourCycles;
const isBrowserLocale24h = ["h23", "h24"].some(hourCycle => hourCycles.includes(hourCycle));

從

Intl.Locale.prototype.hourCycle 屬性是一個訪問器屬性，它返回語言環境使用的計時格式約定。

世界上主要使用兩種計時約定（時鍾）：12 小時制和 24 小時制。 hourCycle 屬性使 JavaScript 程序員更容易訪問特定區域設置使用的時鍾類型。