[筆記] HTML5 Input time 時間格式

近日在網頁開發時,遇上要讓使用者填寫時間的狀況。第一直覺會想到 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


相關文章

  • [筆記] 六角學院 2022 React 新手讀書會 – 4
  • [指南] 前端開發用的 CORS Anywhere via Cloudflare Workers
  • [筆記] Ultimate AWS Certified Developer Associate (69)
  • [指南] Heroku 免費 Dyno 取消後的去處 – Fly.io, Render 和 Supabase
  • [筆記] 六角學院 2022 React 新手讀書會 – 3
  • [筆記] Ultimate AWS Certified Developer Associate (63)
  • [筆記] 六角學院 2022 React 新手讀書會 – 2
  • [筆記] Ultimate AWS Certified Developer Associate (62)
  • [筆記] Vue3 Element Plus 前端分頁、排序和搜尋邏輯
  • [筆記] Ultimate AWS Certified Developer Associate (61)
  • [筆記] Ultimate AWS Certified Developer Associate (59)
  • [筆記] 六角學院 2022 React 新手讀書會 – 1
  • [筆記] Ultimate AWS Certified Developer Associate (58)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (72)
  • [筆記] Ultimate AWS Certified Developer Associate (57)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (71)
  • [筆記] Ultimate AWS Certified Developer Associate (56)
  • [筆記] Ultimate AWS Certified Developer Associate (55)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (70)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (69)
  • [筆記] Ultimate AWS Certified Developer Associate (54)
  • [筆記] Ultimate AWS Certified Developer Associate (53)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (68)
  • [指南] Buefy 搭配 Autocomplete 的思考邏輯
  • [筆記] Ultimate AWS Certified Developer Associate (52)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (67)
  • [筆記] Ultimate AWS Certified Developer Associate (51)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (66)
  • [筆記] Ultimate AWS Certified Developer Associate (50)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (65)
  • [指南] Element UI Pagination 同步思路和避免錯誤
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (64)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (63)
  • [筆記] Ultimate AWS Certified Developer Associate (48)
  • [筆記] Ultimate AWS Certified Developer Associate (47)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (62)
  • [指南] Vue 動態路由後續加載的兩種處理方式
  • [筆記] Ultimate AWS Certified Developer Associate (46)
  • [指南] 從 Vuex 改用 Pinia 的思路轉換記錄
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (61)
  • [指南] Element UI 搭配 i18N form 表單錯誤訊息不會自動切換語言的解決方法
  • [筆記] Ultimate AWS Certified Developer Associate (45)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (60)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (59)
  • [筆記] Ultimate AWS Certified Developer Associate (44)
  • [筆記] Ultimate AWS Certified Developer Associate (43)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (58)
  • [指南] Auth0 SPA Vue2 串接精簡指南
  • [筆記] Ultimate AWS Certified Developer Associate (42)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (57)
  • [筆記] Ultimate AWS Certified Developer Associate (41)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (56)
  • [筆記] Ultimate AWS Certified Developer Associate (40)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (55)
  • [筆記] Ultimate AWS Certified Developer Associate (39)
  • [筆記] Ultimate AWS Certified Developer Associate (38)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (54)
  • [指南] Vue Proxy Server 搭配 POST 的正確使用方式
  • [筆記] Ultimate AWS Certified Developer Associate (37)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (53)
  • [筆記] Ultimate AWS Certified Developer Associate (36)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (52)
  • [筆記] Ultimate AWS Certified Developer Associate (35)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (51)
  • [筆記] Ultimate AWS Certified Developer Associate (34)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (50)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 18 multer 上傳到 imgur 功能
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (49)
  • [筆記] Ultimate AWS Certified Developer Associate (33)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (48)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 17 JWT 登入註冊功能
  • [筆記] Ultimate AWS Certified Developer Associate (32)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (47)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (46)
  • [筆記] Ultimate AWS Certified Developer Associate (31)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (45)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 16 Swagger 初步教學
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (44)
  • [筆記] Ultimate AWS Certified Developer Associate (30)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (43)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 15 全方面的 Error 管理
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (42)
  • [筆記] Ultimate AWS Certified Developer Associate (29)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 14 Middleware 設計
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (41)
  • [筆記] Ultimate AWS Certified Developer Associate (28)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 13 Express 框架初探
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 12 連接遠端資料庫和環境變數設置
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (40)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (39)
  • [筆記] Ultimate AWS Certified Developer Associate (27)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (38)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 11 Mongoose 實作運用
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (37)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 10 Mongoose 額外補充和模組化
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (36)
  • [筆記] Ultimate AWS Certified Developer Associate (26)
  • [筆記] 六角學院 Node.js 2022 直播班記錄 – 9 Mongoose 連線基本操作
  • [筆記] Ultimate AWS Certified Developer Associate (25)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (35)
  • 按讚加入粉絲團

    延伸閱讀