JavaScript 確定瀏覽器是否使用 12 小時或 24 小時格式顯示時間輸入

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 示例中的值保持不變。 我讀過這篇關於 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”按鈕來清除控件的值。

---

[在鉻之前假設邊緣]

邊緣時間控制更加精細，打開帶有滑動卷軸的小時和分鍾選擇器。 它與 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')