問題描述

我正在使用 html 5 輸入元素與 type=time 。問題是它顯示時間與 12 hours，但我希望它顯示在 24 hours 一天。我該怎麼做到 24 小時？這是我的輸入字段

<input type="time" name="time" placeholder="hrs:mins" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" class="inputs time" required>

DEMO

這裏是 jsfiddle

最佳解決辦法

HTML5 時間輸入

這是最簡單的日期/時間相關類型，允許用户選擇 24 小時制的時間，無 AM 或 PM 。返回的值是小時：分鐘，看起來像 14:30 。

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

此功能仍在草稿中。每個瀏覽器顯示不同。

– Opera(Presto Engine) 顯示正確的方法.- Chrome(Webkit Engine) 在 AM /PM 中顯示.- Firefox(Gecko Engine) 沒有顯示任何內容，但是 validate.- Edge 顯示了 popover 類型中的所有必需值窗口



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

不是一個好主意使用！

次佳解決辦法

通過 HTML5 草稿，input type=time 創建了一天中輸入的控件，預計將使用 「用户首選演示文稿」 實現。但這真的意味着使用一個小工具，其中時間演示遵循瀏覽器的語言環境的規則。因此，獨立於周邊內容的語言，演示文稿因瀏覽器的語言，底層操作系統的語言或 system-wide 區域設置 (取決於瀏覽器) 而異。例如，使用 Finnish-language 版本的 Chrome，我將該小工具看作是使用標準的 24 小時制。你的里程會有所不同。

因此，input type=time 是基於本地化的想法，將其全部放在頁面作者的手中。這是故意的在 HTML5 討論中多次提出了這個問題，結果相同：沒有變化。 (除了可能添加了對文本的澄清，使此行為按照預期進行描述。)

請注意，input type=time 中不允許使用 pattern 和 placeholder 屬性。而 placeholder="hrs:mins"如果被實施，將是潛在的誤導。當瀏覽器區域設置使用 「.」 作為分隔符時，用户必須輸入 12.30(帶有句點) 而不是 12:30 。

我的結論是，您應該使用 input type=text，pattern 屬性，並使用一些 JavaScript 來檢查輸入，以便本機不支持 pattern 屬性的瀏覽器的正確性。

第三種解決辦法

它取決於您的本地系統時間設置，24 小時後，將顯示您 24 小時的時間。

第四種辦法

這種類型的支持還是很差的。 Opera 以某種方式顯示它。 Chrome 23 顯示它與秒和 AM /PM，在 24 版本 (開始分支在這一刻)，它將擺脱秒 (如果可能)，但沒有關於 AM /PM 的信息。這不是你想要的，但在這一點上，我看到實現你的時間選擇器格式的唯一選擇是使用 javascript 。

第五種辦法

這取決於 Web 瀏覽器啓動時用户操作系統的時間格式。

所以：

  • 如果您的計算機系統預設置設置為使用 24 小時制，則瀏覽器會將<input type="time"> 元素呈現為--:--(時間範圍：00：00-23：59) 。

  • 如果您更改計算機的系統優先使用 12 小時，則在退出並重新啓動瀏覽器之前，輸出將不會更改。然後將更改為--:-- --(時間段：12:00 AM – 11:59 PM) 。

而且 (在撰寫本文時)，瀏覽器支持只有約 75％(caniuse) 。 Yay：Edge，Chrome，Opera，Android 。 Boo：IE，Firefox，Safari) 。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。