近日在網頁開發時，遇上要讓使用者填寫時間的狀況。第一直覺會想到 input time ，不過這個時間格式有個隱形的坑，它的 12 / 24 小時的選項，是根據使用者電腦端的設定來決定的。如此一來，就會造成在實際設計表單上，產生要不要設計「上午 / 下午 」的選單困擾。
官方說明
- 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)
按讚加入粉絲團延伸閱讀
