[筆記] HTML5 Input time 時間格式

Posted onAuthorANDY LIEN

章節連結

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

html logo

官方說明

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

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

Demo

相關文章

  • [筆記] 程式必修課！離散數學與演算法 – 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
  • [筆記] 程式必修課！離散數學與演算法 – 39
  • [筆記] Vue3 自製 Collapse Transition 收摺動畫
  • [筆記] 2025 跨平台 Font-Family 預設值建議
  • [筆記] FreeFonts.co 供本機端測試字體下載
  • [筆記] 程式必修課！離散數學與演算法 – 38
  • [筆記] Google Chrome Fonts Ninja 套件來偵測當前網頁顯示字體大小顏色
  • [筆記] Air Datepicker 前端日曆套件顯示僅年份選擇
  • [筆記] 程式必修課！離散數學與演算法 – 36
  • [筆記] 程式必修課！離散數學與演算法 – 35
  • [筆記] 程式必修課！離散數學與演算法 – 34
  • [筆記] Vue i18n v10 以上版本 複數 Plural 使用方式
  • [筆記] 程式必修課！離散數學與演算法 – 33
  • [筆記] Email html 模版撰寫樣式注意事項
  • [筆記] 程式必修課！離散數學與演算法 – 32
  • [筆記] 程式必修課！離散數學與演算法 – 31
  • [筆記] 程式必修課！離散數學與演算法 – 30
  • [筆記] 程式必修課！離散數學與演算法 – 29
  • [筆記] 程式必修課！離散數學與演算法 – 28
    • 按讚加入粉絲團

    延伸閱讀