[筆記] HTML5 Input time 時間格式

近日在網頁開發時，遇上要讓使用者填寫時間的狀況。第一直覺會想到 input time ，不過這個時間格式有個隱形的坑，它的 12 / 24 小時的選項，是根據使用者電腦端的設定來決定的。如此一來，就會造成在實際設計表單上，產生要不要設計「上午 / 下午 」的選單困擾。

---

官方說明

• MDN 上頭的文件提到：這個 <input type=’time’> 標籤會依照瀏覽器和使用者的電腦端時間設定來決定如何顯示。
  Safari 是不支援的，如果讀到這標籤，會轉換成 type=’text’ 的模式
• 使用者電腦端的設定若為 12 小時，那麼效果就是 hh:mm AM / hh:mm PM

文字方面，中文的話 AM / PM 會換成上午、下午，且他們會顯示在 hh:mm 的前面

---

Demo

---

相關文章

[筆記] VS Code 搭配 Nuxt3 解決 /.well-known/appspecific/** 問題

[筆記] 程式必修課！離散數學與演算法 – 113

[筆記] 程式必修課！離散數學與演算法 – 112

[筆記] 程式必修課！離散數學與演算法 – 111

[筆記] Tailwindcss 3 升 4 後維持原有 3 的樣式內容

[筆記] 程式必修課！離散數學與演算法 – 110

[筆記] wangEditor 5 搭配 Tailwindcss 4 的樣式衝突問題

[筆記] Vite 開發遇上 431 Request Header Fields Too Large

[筆記] 程式必修課！離散數學與演算法 – 109

[筆記] 動態監聽元素高度 JavaScript Vue 自製 hook

[筆記] 程式必修課！離散數學與演算法 – 107

[筆記] 實作 ColorPicker Vue3 元件

[筆記] Vue3 運用 Pinia 實踐前端篩選排序的邏輯建議

[筆記] VS Code 修正 command not found: code 錯誤

[筆記] 程式必修課！離散數學與演算法 – 105

[筆記] Vue3 實作拖曳點擊上傳結合圖片預覽元件

[筆記] 程式必修課！離散數學與演算法 – 104

[筆記] 端對端 E2E 前端測試 自動開啟瀏覽器 start-server-and-test

[筆記] 程式必修課！離散數學與演算法 – 102

[筆記] 調整系統時間 模擬未來 new Date()

[筆記] 程式必修課！離散數學與演算法 – 101

[筆記] 程式必修課！離散數學與演算法 – 100

[筆記] Node.js http-proxy-middleware 部分更改路由 pathRewrite

[筆記] Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0

[筆記] import type 和 import 的差異 TypeScript

[筆記] Nuxt3 加入 Sentry 相關設定和注意事項

[筆記] 程式必修課！離散數學與演算法 – 97

[筆記] Vite-ssg 執行完成後進行自動化操作並壓縮

[筆記] 重新命名 Github Repo 名稱並更換已下載的 Repo 路徑位置

[筆記] 程式必修課！離散數學與演算法 – 96

[筆記] Nuxt3 圖片路徑兼容本地開發和遠端伺服器 – 2

[筆記] 程式必修課！離散數學與演算法 – 95

[筆記] HTML 按鈕上用 after 偽元素作對角線

[筆記] 程式必修課！離散數學與演算法 – 94

[筆記] 程式必修課！離散數學與演算法 – 93

[筆記] Nuxt3 圖片路徑兼容本地開發和遠端伺服器

[筆記] Nuxt3 使用錨點導航導致 router meta 資料遺失的替代方案

[筆記] 程式必修課！離散數學與演算法 – 92

[筆記] 用 media query 來撰寫僅支援 hover 的樣式

[筆記] 程式必修課！離散數學與演算法 – 91

[筆記] 程式必修課！離散數學與演算法 – 90

[筆記] Tailwindcss 4 Dark Mode 靜態與動態設值

[筆記] 程式必修課！離散數學與演算法 – 89

[筆記] 程式必修課！離散數學與演算法 – 87

[筆記] 程式必修課！離散數學與演算法 – 86

[筆記] 程式必修課！離散數學與演算法 – 85

[筆記] 程式必修課！離散數學與演算法 – 84

[筆記] 程式必修課！離散數學與演算法 – 83

[筆記] 程式必修課！離散數學與演算法 – 82

[筆記] 解決 Nuxt3 SSG 靜態網站生成過多 js 檔的問題

[筆記] 程式必修課！離散數學與演算法 – 81

[筆記] 程式必修課！離散數學與演算法 – 80

[筆記] TailwindCSS 4 在 Vue3 與 SCSS 共用

[筆記] 程式必修課！離散數學與演算法 – 79

[筆記] 程式必修課！離散數學與演算法 – 78

[筆記] 程式必修課！離散數學與演算法 – 77

[筆記] UI Lib Picker 挑選適合你的 Vue3 UI Library

[筆記] 程式必修課！離散數學與演算法 – 76

[筆記] Nuxt3 搭配 mk-cert 使用 https 進行開發

[筆記] 程式必修課！離散數學與演算法 – 75

[筆記] 程式必修課！離散數學與演算法 – 74

[筆記] 程式必修課！離散數學與演算法 – 73

[筆記] 程式必修課！離散數學與演算法 – 72

[筆記] 程式必修課！離散數學與演算法 – 71

[筆記] 程式必修課！離散數學與演算法 – 70

[筆記] Vite 結合 mk-cert https 開發環境

[筆記] 程式必修課！離散數學與演算法 – 69

[筆記] 程式必修課！離散數學與演算法 – 68

[筆記] 程式必修課！離散數學與演算法 – 67

[筆記] 程式必修課！離散數學與演算法 – 66

[筆記] 程式必修課！離散數學與演算法 – 65

[筆記] 程式必修課！離散數學與演算法 – 64

[筆記] 程式必修課！離散數學與演算法 – 63

[筆記] 程式必修課！離散數學與演算法 – 62

[筆記] 程式必修課！離散數學與演算法 – 60

[筆記] 程式必修課！離散數學與演算法 – 59

[筆記] 程式必修課！離散數學與演算法 – 58

[筆記] 程式必修課！離散數學與演算法 – 57

[筆記] 程式必修課！離散數學與演算法 – 56

[筆記] 程式必修課！離散數學與演算法 – 55

[筆記] 修正 ResizeObserver loop limit exceeded 錯誤

[筆記] 程式必修課！離散數學與演算法 – 54

[筆記] 程式必修課！離散數學與演算法 – 53

[筆記] 程式必修課！離散數學與演算法 – 52

[筆記] 程式必修課！離散數學與演算法 – 51

[筆記] mkcert + vite 開發環境導入 https

[筆記] 程式必修課！離散數學與演算法 – 50

[筆記] 程式必修課！離散數學與演算法 – 49

[筆記] 程式必修課！離散數學與演算法 – 48

[筆記] 程式必修課！離散數學與演算法 – 47

[筆記] 程式必修課！離散數學與演算法 – 46

[筆記] Vue3 實作點擊聚焦 input 當失焦時觸發函式

[筆記] 程式必修課！離散數學與演算法 – 45

[筆記] 程式必修課！離散數學與演算法 – 44

[指南] EasyResizer 免上傳雲端的批次轉換圖片格式工具

[筆記] 程式必修課！離散數學與演算法 – 42

[筆記] 程式必修課！離散數學與演算法 – 41

[指南] 2025 Office 365 Lens + OneNote 簡單快速儲存紙本名片

[筆記] Vite 6 vitest 出現 Type PluginOption[] is not assignable to type PluginOption 錯誤

[筆記] 程式必修課！離散數學與演算法 – 40

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 113
• [筆記] 程式必修課！離散數學與演算法 – 112
• [筆記] 程式必修課！離散數學與演算法 – 111
• [筆記] Tailwindcss 3 升 4 後維持原有 3 的樣式內容
• [筆記] 程式必修課！離散數學與演算法 – 110