[筆記] 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

相關文章

  • [筆記] 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 位置的相關細節資訊
    • 按讚加入粉絲團

    延伸閱讀