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


相關文章

  • [筆記] 程式必修課!資料結構與演算法|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
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
  • [面試] 2024 前端工程師面試心得
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
  • [筆記] HTML z-index 父層 子層 和 Stacking Context
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
  • [筆記] Vue3 Teleport Drawer 抽屜實作心得
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 6
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 18 – Breadcrumbs
  • [筆記] Ultimate AWS Certified Developer Associate (178)
  • [筆記] Ultimate AWS Certified Developer Associate (177)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 17 – Infitite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (176)
  • [筆記] Ultimate AWS Certified Developer Associate (175)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 16 – Table
  • [筆記] 使用 Vite TypeScript 模版開發一個 npm 套件
  • [筆記] Ultimate AWS Certified Developer Associate (174)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 15 – Carousel
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 14 – Card
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 13 – Accordion/Collapse
  • [筆記] Ultimate AWS Certified Developer Associate (173)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 12 – Tooltip
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 11 – Badge
  • [筆記] Vue3 + Vite 與 Bootstrap5 合用 Unocss
  • [筆記] Ultimate AWS Certified Developer Associate (172)
  • [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 2
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 10 – Chip/Tag
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 9 – Upload
  • [筆記] Vue 2 升級 Vue 3 + Vite 心得 – 1
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 8 – Rate
  • [筆記] Ultimate AWS Certified Developer Associate (171)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 7 – Slider
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 6 – Form Control
  • [筆記] Ultimate AWS Certified Developer Associate (170)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 5 – Input
  • [筆記] Ultimate AWS Certified Developer Associate (169)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 4 – Checkbox
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 3 – Radio
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 2 – Switch
  • [筆記] Ultimate AWS Certified Developer Associate (168)
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 1 – 開發環境和 Button
  • [筆記] Ultimate AWS Certified Developer Associate (167)
  • [筆記] Ultimate AWS Certified Developer Associate (166)
  • [筆記] Ultimate AWS Certified Developer Associate (165)
  • [筆記] Ultimate AWS Certified Developer Associate (164)
  • [筆記] XState React 設計登入模式筆記
  • [筆記] React 自製 Provider 的基礎知識
  • [筆記] Ultimate AWS Certified Developer Associate (162)
  • [筆記] React Select 搭配 Testing Library 進行單元測試
  • [筆記] Ultimate AWS Certified Developer Associate (161)
  • [筆記] XState React 狀態管理初探
  • [筆記] Ultimate AWS Certified Developer Associate (160)
  • [筆記] Ultimate AWS Certified Developer Associate (159)
  • [筆記] React Unit Test 關於路由和套件的模擬 By Jest
  • [筆記] Ultimate AWS Certified Developer Associate (158)
  • [指南] 用 Vite 開發一個 NPM 套件 ( 以 Parse Localized Number 為例 )
  • [筆記] Ultimate AWS Certified Developer Associate (157)
  • [筆記] Ultimate AWS Certified Developer Associate (156)
  • [筆記] React 撰寫元件時 如何保留留下客製化區塊 ( Vue )
  • [筆記] Ultimate AWS Certified Developer Associate (155)
  • [筆記] HTML 巢狀 div 所造成的縮排效果
  • [筆記] React Unit Testing 測試心法
  • 按讚加入粉絲團

    延伸閱讀