如何調整<input>元素的時間格式（12小時製或24小時制）？

Question

我正在使用帶有type=time的HTML5輸入元素。問題是它顯示的時間是12小時制，但我希望它以24小時制顯示。我該如何將其設定為24小時制？

這是我的輸入欄位：

< /pre>

Answer 1

根據HTML5草案，input type=time建立了一個用於輸入一天中時間的控件，預計將使用「使用者首選的顯示方式」來實現。但實際上，這意味著使用遵循瀏覽器本地化規則的小部件。因此，不論周遭內容的語言是什麼，顯示方式都會根據瀏覽器的語言、底層作業系統的語言或系統範圍的區域設定（取決於瀏覽器）而改變。例如，使用芬蘭語版本的Chrome瀏覽器，我看到的小工具使用標準的24小時制。你的情況可能會有所不同。

因此，input type=time是基於將本地化的想法完全交給頁面作者之外的方法。這是有意的；在HTML5討論中，這個問題已經提出了幾次，結果都是沒有改變（除了可能對文本進行了澄清，將此行為描述為預期的行為）。

請注意，input type=time不允許使用pattern和placeholder屬性。而且，如果實現了placeholder="hrs:mins"，可能會產生誤導。當瀏覽器的語言環境使用「.」作為時間分隔符號時，使用者可能需要輸入12.30（使用句點），而不是12:30。

我的結論是，在不支援pattern屬性的瀏覽器上，應該使用input type=text，並使用一些JavaScript來檢查輸入的正確性。

Answer 2

HTML5時間輸入

這是與日期/時間相關類型中最簡單的一種，允許使用者在24/12小時制的時鐘上選擇時間，通常取決於使用者的作業系統區域設定。傳回的值以24小時的小時:分鐘格式，看起來類似14:30。

更多詳細信息，包括每個瀏覽器的外觀，可以在MDN上找到。

<input type="time" name="time">