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

官方說明
- MDN 上頭的文件提到:這個 <input type=’time’> 標籤會依照瀏覽器和使用者的電腦端時間設定來決定如何顯示。
Safari 是不支援的,如果讀到這標籤,會轉換成 type=’text’ 的模式
- 使用者電腦端的設定若為 12 小時,那麼效果就是 hh:mm AM / hh:mm PM
文字方面,中文的話 AM / PM 會換成上午、下午,且他們會顯示在 hh:mm 的前面
Demo
相關文章
[筆記] 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)
[筆記] 六角學院 Node.js 2022 直播班記錄 – 8 – Promise, async 和 await
[筆記] Ultimate AWS Certified Developer Associate (24)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (34)
[筆記] 六角學院 Node.js 2022 直播班記錄 – 7 – MongoDB 操作 CRUD 相關指令(下)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (33)
[筆記] Ultimate AWS Certified Developer Associate (23)
[筆記] 六角學院 Node.js 2022 直播班記錄 – 6 – MongoDB 操作 CRUD 相關指令
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (32)
[筆記] Ultimate AWS Certified Developer Associate (22)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (31)
[筆記] Ultimate AWS Certified Developer Associate (21)
[筆記] 六角學院 Node.js 2022 直播班記錄 – 5 – MongoDB 環境建置
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (30)
[筆記] Ultimate AWS Certified Developer Associate (20)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (29)
[筆記] Ultimate AWS Certified Developer Associate (19)
[指南] Heroku 自動佈署子資料夾的專案
[筆記] 六角學院 Node.js 2022 直播班記錄 – 4 – 佈署到 Heroku 遠端
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (28)
[筆記] Ultimate AWS Certified Developer Associate (18)
[筆記] 六角學院 Node.js 2022 直播班記錄 – 3 – POSTMAN 和自建 TodoList API Server
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (27)
[筆記] Ultimate AWS Certified Developer Associate (17)
[筆記] 六角學院 Node.js 2022 直播班記錄 – 2 – npm
[筆記] 前端、行銷需知道的 GTM 綁定 Google Analytics 用 JavaScript 客製化追蹤
[筆記] Ultimate AWS Certified Developer Associate (16)
[筆記] 前端特殊字元處理邏輯
[筆記] 六角學院 Node.js 2022 直播班記錄 – 1 – Node.js 介紹和 node 模組原理
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (26)
[筆記] Ultimate AWS Certified Developer Associate (15)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (25)
[筆記] Ultimate AWS Certified Developer Associate (14)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (24)
[筆記] Ultimate AWS Certified Developer Associate (13)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (23)
[筆記] Ultimate AWS Certified Developer Associate (12)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (22)
[筆記] Ultimate AWS Certified Developer Associate (11)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (21)
[筆記] Ultimate AWS Certified Developer Associate (10)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (20)
[筆記] Ultimate AWS Certified Developer Associate (9)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (19)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (18)
[筆記] Ultimate AWS Certified Developer Associate (8)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (17)
[筆記] Ultimate AWS Certified Developer Associate (7)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (16)
[筆記] Ultimate AWS Certified Developer Associate (6)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (15)
[筆記] Ultimate AWS Certified Developer Associate (5)
[筆記] PHP 中傳入 JavaScript 的參數值到網址列 Query
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (14)
[筆記] JavaScript 不重整頁面動態修改 URL 中的 Query 參數
[筆記] Ultimate AWS Certified Developer Associate (4)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (13)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (12)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (11)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (10)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (9)
[筆記] CSS all:revert – 讓 CSS 設定部分還原成瀏覽器預設狀態
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (8)
[指南] SVG Icons 提供 Single Path 的 SVG 檔案
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (7)
[指南] 免管理員權限 – 跨平台的 NVS 來管理多版本 Node.js + Git Bash + CMD
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (6)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (5)
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (4)
[指南] Vuetify 2 Dark Mode 配色設定與一些細節
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (3)
[指南] 申請 Patreon 創作者的每月訂閱付款後台設定
[指南] 如何加入官方 Github Sponsors 的等候清單
[筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (2)
[筆記] 初探 WordPress Restful API – 用 JSON 方式取得文章
[指南] 替 Vue-SFC-Rollup 開發的 Vue 套件做個於 Github Pages 的 Demo 頁面
[筆記] BLISK 執行 Mobile Test 的實用瀏覽器
[筆記] Nuxt js 初探筆記 5 – Nuxt Generate 模式下跳轉到 Error Page
[筆記] JavaScript 按鈕自動下載類型與程式碼
[筆記] Vue Router & Vuex 合用解決動態路由和重新整理刷新問題
[指南] Python 非管理員權限安裝並架設虛擬環境 Windows
[筆記] Google Adsense App 不能使用後的替代方案
[筆記] Nuxt js 初探筆記 4 – SEO 相關的逐頁設定
[筆記] 用原生 JavaScript 製作 Debounce 效果
[指南] 免管理員權限安裝 MongoDB 本機端開發環境
[筆記] Nuxt js 初探筆記 3 – 佈署靜態頁面的測試問題
[筆記] 使用 ASCII Tree Generator 視覺化工具產生樹狀圖
[筆記] jQuery css 加入 !important 的注意事項
[指南] IPInfo.io 查詢你的 IP 位置的相關細節資訊
按讚加入粉絲團延伸閱讀