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

相關文章

  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 34
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 33
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 32
  • [指南] 解決 Synology 搭配 TimeMachine 出現 The Backup is Already In Use 問題
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 31
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 30
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 29
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 28
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 27
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 26
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 25
  • [筆記] TypeScript 拓展 Window 物件定義
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 24
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 23
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 22
  • [筆記] 篩選可用的時間區段 – 思路與邏輯
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 21
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 20
  • [筆記] yarn 安裝時出現 certificate has expired 的解決方式
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 19
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 18
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 17
  • [筆記] vite 開發實作替代 html 模版文字
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 16
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 15
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 14
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 13
  • [筆記] Vue3 在 vue 檔案以外的地方使用 vue-i18n
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 12
  • [筆記] 2024 從 Jest 轉移到 Vitest 過程筆記
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 11
  • [筆記] ESLint 8 → Eslint 9 升級指南 以 Vue3 + TypeScript + Prettier 為例
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 10
  • [筆記] Vite Plugin 生產正式環境下 過濾 Public 資料夾
  • [筆記] 如何在桌機瀏覽器上模擬 touch 事件
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 9
  • [筆記] Vueform Vue3 Multiselect 封裝
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 8
  • [筆記] Vite 開發與生產環境，注入內容到瀏覽器 window 物件中
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 7
  • [筆記] Promise.allSettled TypeScript 和批次 Batch 發送寫法
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 6
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 5
  • [筆記] HTML Vue3 Click Outside 實作與誤區
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 4
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 3
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 2
  • [筆記] 讓 SVG 得以自適應寬高縮訪放的方法
  • [筆記] Express + TypeScript + http-proxy-middleware 架設簡易開發 Proxy 伺服器
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 1
  • [筆記] 利用 Popper.js 下一代 Floating UI 撰寫 Tooltip 元件 – Vue3 & Jest
  • [筆記] 解決 Google Chrome 的 Added non-passive event listener to a scroll-blocking event 錯誤
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 80
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 79
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 77
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 76
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 75
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 74
  • [筆記] 增加 Dev Proxy 的指向彈性 – 多個 Axios 實例 Instance
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 72
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 71
  • [筆記] Tailwind CSS Safelist 設定
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 70
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 69
  • [筆記] 純 CSS Blur 創造模糊效果
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 68
  • [筆記] Vue3 搭配原生 swiper js 進行使用
  • [筆記] 使用 Google Maps 的自製地圖 iFrame 來標示多個地點
  • [筆記] Vue3 onMounted 無法獲得 DOM 的原因和解法
  • [筆記] JavaScript 跨日判斷與非連續時間範圍檢查
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 67
  • [筆記] Jest Vue3 測試含有 Teleport 的元件
  • [筆記] 理想中的 HTML Modal 切版作法
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 66
  • [筆記] JavaScript HTML 多個 Modal 避免底層捲軸滾動
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 65
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 64
  • [筆記] npm-run-all 傳遞參數
  • [筆記] Vue3 Jest Composition API Setup TypeScript 測試取得 computed 的型別
  • [筆記] unplugin-icons 搭配 Jest 使用時得以編譯過的方法
  • [筆記] Vue3 TypeScript Vite 多頁面模版製作開發心得
  • [筆記] 在 pnpm 上使用 npx 語法
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 60
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 58
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 56
  • [筆記] HTML height:0 到 height: auto 的動畫效果實現
  • [筆記] 如何隱藏 Scrollbar 但保有滾動效果
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 52
  • [指南] 既存 JavaScript + HTML + CSS 原生頁面打造新功能的一些心法
  • [筆記] Chrome DevTools 改寫特定 API 的 Respose Header 加速開發
  • [筆記] Nuxt 關於 SCSS 的引入寫法注意事項
  • [筆記] Sticky Footer 實作方式收集
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 44
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 43
  • [筆記] Node.js Express 撰寫單元測試 Unit Test 思路和踩坑記錄
  • [筆記] QR Code 之 Quiet Zone 的重要性
  • [指南] 從頭開始 – 前端網頁工程師之開發環境架設
  • [筆記] 在一台電腦上 操作多個 Git Config
  • [筆記] HTML5 InnerHTML InnerText 的差異
  • [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 21
    • 按讚加入粉絲團

    延伸閱讀